基于Recorder.js+vue+cube-ui开发的录音、图片+照相、表情(手机端)html5

最近公司要用网页开发手机端。看了下前端框架,考虑更新问题,选择了cube-ui+vue,总体感觉还不错。

总体的开发最大的问题就是发表评论要发语音、表情、图片(支持照相),网上找了一些,零零散散的,这里我把它

们整理一起,废话不说了,就上几张图吧。

基于Recorder.js+vue+cube-ui开发的录音、图片+照相、表情(手机端)html5_第1张图片基于Recorder.js+vue+cube-ui开发的录音、图片+照相、表情(手机端)html5_第2张图片基于Recorder.js+vue+cube-ui开发的录音、图片+照相、表情(手机端)html5_第3张图片基于Recorder.js+vue+cube-ui开发的录音、图片+照相、表情(手机端)html5_第4张图片

表情使用的是Emoji表情,如果你是win7的话可能显示不了。语音基于vue-audio-recorder,只是加了长按录音,样式也改了一下。

图片上传的话,cube-ui里的图片上传,网上找了个调手机相机的加了进去,唯一不足就是压缩没加进去(太菜了,也不想弄了)。

代码有点多,先看结构吧

基于Recorder.js+vue+cube-ui开发的录音、图片+照相、表情(手机端)html5_第5张图片

下面的小箭头是录音的,懒就没放一起。上传调用的话是

基于Recorder.js+vue+cube-ui开发的录音、图片+照相、表情(手机端)html5_第6张图片

总结

语音的话必须用https协议,因为要拿到手机录音权限,手机不是所有的浏览器都能用的,有的浏览器始终拿不到录音这个权限,比如qq浏览器。

如果有有缘人的可以试一试。这几个文件的地址是https://download.csdn.net/download/qq_36031425/11837481

你可能感兴趣的:(基于Recorder.js+vue+cube-ui开发的录音、图片+照相、表情(手机端)html5)