您现在的位置是：网站首页> 编程资料编程资料

HTML5网页录音和上传到服务器支持PC、Android，支持IOS微信功能html5录音功能实战示例详解HTML5 录音的踩坑之旅HTML5录音实践总结(Preact)

2023-10-16 491人已围观

简介 这篇文章主要介绍了HTML5网页录音和上传到服务器支持PC、Android，支持IOS微信功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

准备做一个网页版聊天界面，表情啊、图片啊、上传文件啊都应该要有，视频就算了，语音还是要的。

本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器。

录音代码

本示例代码支持PC、Android、IOS(仅Safari)中使用，如果用RecordApp可增加对IOS(微信浏览器、小程序)的支持。

看万遍代码不如行动一遍，新建一个html文件，把下面三段代码复制到文件内，双击浏览器打开就能进行测试。
 

上传服务器代码

立即播放代码

--------------------------------------------------------------------------------

Recorder

GitHub地址：https://github.com/xiangyuecn/Recorder

在线测试: 点此测试

Recorder用于html5录音，为一个纯粹的js库，支持大部分已实现getUserMedia的移动端、PC端浏览器，包括腾讯Android X5内核(QQ、微信)。

录音默认输出mp3格式，另外可选wav格式（此格式录音文件超大）；有限支持ogg、webm、amr格式；支持任意格式扩展（前提有相应编码器）。

小巧：如果对录音文件大小没有特别要求，可以仅仅使用录音核心+wav编码器，源码不足300行，压缩后的recorder.wav.min.js不足4kb。mp3使用lamejs编码，压缩后的recorder.mp3.min.js开启gzip后54kb。

由于IOS(11.X、12.X)上只有Safari支持getUserMedia，其他浏览器均不支持H5录音，因此额外针对IOS对Recorder进行了进一步的兼容封装，升级成了RecordApp，用于支持微信（含浏览器、小程序web-view），另外RecordApp对Hybrid App也提供了更加优秀的支持。

由于RecordApp需要微信公众(订阅)号提供JsSDK录音支持，所以开发难度会大些，但支持的环境更多。Recorder拿来就能用，具体使用哪个请参考下表：

支持RecorderRecordApp
PC浏览器√√
Android浏览器√√
Android微信(含小程序)√√
Android Hybrid App√√
IOS Safari√√
IOS微信(含小程序) √
IOS Hybrid App √
IOS其他浏览器  
开发难度简单复杂
第三方依赖无依赖微信公众号

* 可到github中查阅RecordApp源码，在目录xiangyuecn/Recorder/app-support-sample中。

以上所述是小编给大家介绍的HTML5网页录音和上传到服务器支持PC、Android，支持IOS微信功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

上一篇：canvas画布实现手写签名效果的示例代码html5 利用canvas手写签名并保存的实现方法如何用canvas实现在线签名的示例代码Html5基于canvas实现电子签名并生成PDF文档

下一篇：html5中监听canvas内部元素点击事件的三种方法如何在Canvas上的图形/图像绑定事件监听的实现如何在Canvas中添加事件的方法示例详解Canvas事件绑定HTML5 Canvas的事件处理介绍一个不错的HTML5 Canvas多层点击事件监听实例HTML5 Canvas鼠标与键盘事件demo示例详解如何在Canvas中添加事件的方法

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网