【源GitHub仓库】 | 【Gitee镜像库】本文档中默认使用github.io部署的链接，如果无法访问，请直接下载仓库源码到本地然后双击打开html文件访问。

:open_book:Recorder用于html5录音

支持在大部分已实现getUserMedia的移动端、PC端浏览器麦克风录音、实时处理，主要包括：Chrome、Firefox、Safari、iOS 14.3+、Android WebView、腾讯Android X5内核(QQ、微信、小程序WebView)、Electron、大部分2021年后更新的Android手机自带浏览器、2024年后更新的Android版UC内核(UC、支付宝、钉钉)；不支持：~~老旧国产手机自带浏览器、老旧iOS(11.0-14.2)上除Safari外的其他任何形式的浏览器~~。

支持在非浏览器环境中使用部分功能（如nodejs、各种使用js来构建的程序），使用RecordApp可在微信小程序、uni-app中直接录音。

支持对任意MediaStream进行音频录制、实时处理，包括：getUserMedia返回的流、WebRTC中的remote流、audio、video标签的captureStream方法返回的流、自己创建的流 等等。

提供多个插件功能支持，拥有丰富的音频可视化、变速变调处理、语音识别、音频流播放等；搭配上强大的实时处理支持，可用于各种网页应用：从简单的录音，到复杂的实时语音识别（ASR），甚至音频相关的游戏，都能从容应对；提供转码支持，允许将录制的buffers数据或任意pcm数据转码成你需要的格式（参考rec.mock方法）。

主要用于语音录制，因此仅对单声道进行支持（未适配双声道），支持超长时间录音（参考rec.buffers）；默认输出mp3格式，另外可选wav、pcm、g711a、g711u、ogg、amr、webm(beta)格式，支持任意格式扩展（前提有相应编码器）；使用recorder.mp3.min.js（150kb）即可录制mp3，使用recorder.wav.min.js（25kb）即可录制wav；均支持实时转码和实时传输。

音频文件的上传和播放：可直接使用常规的Audio HTML标签来播放完整的音频文件，参考文档下面的【快速使用】部分，有上传和播放例子；上传了的录音直接将音频链接赋值给audio.src即可播放；本地的blob音频文件可通过URL.createObjectURL来生成本地链接赋值给audio.src即可播放，或者将blob对象直接赋值给audio.srcObject（兼容性没有src高）。实时的音频片段文件播放，可以使用本库自带的BufferStreamPlayer插件来播放，简单高效，或者采用别的途径播放。

如需录音功能定制开发，网站、App、小程序、前端后端开发等需求，请加本文档下面的QQ群，联系群主（即作者），谢谢~

Recorder H5 ： [ H5在线测试 ] [ H5 QuickStart ] [ H5 vue ] [ H5 ts ] [ 旧版本测试 ]

Recorder App ： [ RecordApp测试 ] [ App QuickStart ] [ App vue ] [ Android、iOS App源码 ] [ 微信小程序源码 ] [ uni-app源码 ]

工具集 ： [ Recorder代码运行和静态分发 ] [ PCM转WAV播放测试和转码 ] [ 无用户操作测试 ] [ Can I Use查看浏览器支持情况 ]

<img src="https://gitee.com/xiangyuecn/Recorder/raw/master/assets/demo.png" width="100px"> 手机浏览器扫一扫在线测试

Demo片段列表

App Demo

Android Demo App ：下载APK（40kb，删除.zip后缀，源码）

iOS Demo App ：下载源码自行编译

【QQ群】交流与支持

欢迎加QQ群：①群 781036591、②群 748359095、③群 450721519，纯小写口令：recorder

:open_book:快速使用

你可以通过阅读和运行QuickStart.html文件来快速入门学习，直接将QuickStart.htmlcopy到你的(https、localhost)网站中，无需其他文件，就能正常开始测试了；注意：需要在https、localhost等安全环境下才能进行录音。

https环境搭建最佳实践：建议给自己的域名申请一个泛域名通配符证书（*.xxx.com），然后线上、本地开发均可使用此证书；本地开发环境直接分配一个三级域名（dev.xxx.com、local.xxx.com、192-168-1-123.xxx.com）解析A记录到电脑局域网的IP地址（192.168.1.123、127.0.0.1），方便本地开发跨端调试（本地如何配置https请针对自己的开发环境自行搜索，很容易）。

获取泛域名通配符证书推荐：在线免费申请（ZeroSSL、Let’s Encrypt）；不建议自己生成根证书来签发域名证书，一个是流程复杂，每个设备均要导入根证书，致命的是很多现代浏览器不再信任用户目录下导入的根证书（Android）。

如果必须http访问，Chrome中可尝试打开chrome://flags/#unsafely-treat-insecure-origin-as-secure，启用Insecure origins treated as secure，把你的地址含端口配置进去，然后重启浏览器。

【1】加载框架

Recorder的所有js文件均为手动引入（内部不会自动引用），因此未被你引入的文件均可删除来精简源码大小。

方式一：使用script标签引入

在需要录音功能的页面引入压缩好的recorder.xxx.min.js文件即可（CDN：JsDelivr、unpkg）

<script src="recorder.mp3.min.js"></script> <!--已包含recorder-core和mp3格式支持, CDN不稳定仅供测试: https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/recorder.mp3.min.js-->

或者直接使用源码（src内的为源码、dist内的为压缩后的），可以引用src目录中的recorder-core.js+相应类型的实现文件，比如要mp3录音：

<script src="src/recorder-core.js"></script> <!--必须引入的录音核心，CDN不稳定仅供测试: https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/src/recorder-core.js-->

<script src="src/engine/mp3.js"></script> <!--相应格式支持文件；如果需要多个格式支持，把这些格式的编码引擎js文件放到后面统统加载进来即可-->
<script src="src/engine/mp3-engine.js"></script> <!--如果此格式有额外的编码引擎（*-engine.js）的话，必须要加上-->

<script src="src/extensions/waveview.js"></script>  <!--可选的插件支持项，把需要的插件按需引入进来即可-->

方式二：通过import/require引入

通过 npm 进行安装 npm install recorder-core --registry=https://registry.npmmirror.com/ ，如果直接clone的源码下面文件路径调整一下即可

Recorder

Install / Use

README