【源GitHub仓库】 | 【Gitee镜像库】本文档中默认使用github.io部署的链接,如果无法访问,你可替换链接开头部分成gitee.io部署的链接访问更快。
:open_book:Recorder用于html5录音
支持在大部分已实现getUserMedia
的移动端、PC端浏览器麦克风录音、实时处理,主要包括:Chrome、Firefox、Safari、iOS 14.3+、Android WebView、腾讯Android X5内核(QQ、微信、小程序WebView)、Electron、大部分2021年后更新的Android手机自带浏览器、2024年后更新的Android版UC内核(支付宝、钉钉);不支持:Android版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群,联系群主(即作者),谢谢~
提示:如果下面github.io链接无法访问,可尝试替换链接开头部分成 https://xiangyuecn.gitee.io/recorder/
访问更快。
Recorder H5 : [ H5在线测试 | gitee镜像 ] [ H5 QuickStart ] [ H5 vue ] [ H5 ts ] [ 旧版本测试 ]
Recorder App : [ RecordApp测试 ] [ App QuickStart ] [ App vue ] [ Android、iOS App源码 ] [ 微信小程序源码 ] [ uni-app源码 ]
工具集 : [ Recorder代码运行和静态分发 ] [ PCM转WAV播放测试和转码 ] [ 无用户操作测试 ] [ Can I Use查看浏览器支持情况 ]
Demo片段列表
提示:如果下面github.io链接无法访问,可尝试点此使用gitee.io访问这些Demo。
- 【Demo库】【格式转换】-mp3等格式解码转成其他格式
- 【Demo库】【格式转换】-wav格式转成其他格式
- 【Demo库】【格式转换】-amr格式转成其他格式
- 【教程】【音频流】【上传】实时转码并上传-通用版
- 【教程】【音频流】【上传】实时转码并上传-mp3专版
- 【教程】【音频流】【上传】实时转码并上传-pcm固定帧大小
- 【教程】【音频流】【播放】实时解码播放音频片段
- 【教程】【播放】【可视化】实时录制处理audio、video播放流
- 【教程】【ASR】实时语音识别、音频文件转文字-阿里云版
- 【Demo库】【文件合并】-mp3多个片段文件合并
- 【Demo库】【文件合并】-wav多个片段文件合并
- 【教程】实时多路音频混音
- 【教程】变速变调音频转换
- 【教程】新录音从老录音接续、或录制中途插入音频
- 【教程】DTMF(电话拨号按键信号)解码、编码
- 【Demo库】PCM采样率提升
- 【Demo库】【信号处理】IIR低通、高通滤波
- 【测试】【信号处理】FFT频域分析ECharts频谱曲线图
- 【测试】WebM格式解析并提取音频
- 【测试】G711、G72X编码和解码播放
- 【Demo库】js二进制转换-Base64/Hex/Int16Array/ArrayBuffer/Blob
- 【测试】音乐合成-用波形函数将歌曲简谱文本转成PCM
- 【测试】音频可视化相关插件测试
App Demo
Android Demo App : 下载APK(40kb,删除.zip后缀, 源码)
iOS Demo App :下载源码 自行编译
【QQ群】交流与支持
欢迎加QQ群:①群 781036591、②群 748359095、③群 450721519,纯小写口令:recorder
:open_book:快速使用
你可以通过阅读和运行QuickStart.html文件来快速入门学习,直接将QuickStart.html
copy到你的(https、localhost)网站中,无需其他文件,就能正常开始测试了;注意:需要在https、localhost等安全环境下才能进行录音。