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

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

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

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

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

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

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

代码有点多,先看结构吧

在这里插入图片描述

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

在这里插入图片描述

总结

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值