基于JS实现web端录音与播放功能


Posted in Javascript onApril 17, 2019

纯js实现web端录音功能,功能并不是特别多,逐步增加中,详细地址:github。

getUserMedia在非localhost和127的情况下,需要开启https,由于腾讯云的没备案,demo就不放了,可以自行获取代码并启动测试。

实现方式

实现原理的话,主要是以下三点,

  • 利用webrtc的getUserMedia方法获取设备音频输入,使用audioprocess得到音频流(pcm流,范围-1到1)。
  • 转码,利用前端中的ArrayBuffer等二进制操作按采样位数处理流信息。
  • 使用decodeAudioData转码arraybuffer到audioBuffer并播放(小文件,大文件使用audio)。

使用方式

script方式

直接引入dist下的recorder.js即可

let recorder = new Recorder();

npm方式

安装:

npm i js-audio-recorder

调用:

import Recorder from 'js-audio-recorder';
let recorder = new Recorder();

API

基本方法

// 开始录音
recorder.start();
// 暂停录音
recorder.pause();
// 继续录音
recorder.resume()
// 结束录音
recorder.stop();
// 录音播放
recorder.play();
// 销毁录音实例,释放资源,fn为回调函数,
recorder.destroy(fn);
recorder = null;
下载功能
// 下载pcm文件
recorder.downloadPCM();
// 下载wav文件
recorder.downloadWAV();
// 重命名pcm文件,wav也支持
recorder.downloadPCM('重命名');
获取录音时长
// 回调持续输出时长
recorder.onprocess = function(duration) {
  console.log(duration);
}
// 手动获取录音时长
console.log(recorder.duration);

默认配置

sampleBits,采样位数,默认是16
sampleRate,采样频率,浏览器默认的,我的chrome是48000
numChannels,声道数,默认是1

传入参数

new Recorder时支持传入参数,

{
  sampleBits: 16,     // 采样位数,范围8或16
  sampleRate: 16000,   // 采样率,范围11025、16000、22050、24000、44100、48000
  numChannels: 1,     // 声道,范围1或2
}

注意

使用127.0.0.1或localhost尝试,因为getUserMedia在高版本的chrome下需要使用https。

兼容性

主要是以下几个方面:

Web Audio Api

https://caniuse.com/#search=w...

getUserMedia

https://caniuse.com/#search=g...

Typed Arrays

https://caniuse.com/#search=t...

欢迎访问和查看:recorder。

总结

以上所述是小编给大家介绍的基于JS实现web端录音与播放功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用javascript添加控件自定义属性解析
Nov 25 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 #Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 #Javascript
Vue项目路由刷新的实现代码
Apr 17 #Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 #Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 #Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 #Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 #Javascript
You might like
PHP5中MVC结构学习
2006/10/09 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
python实现xlsx文件分析详解
2018/01/02 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
在keras里实现自定义上采样层
2020/06/28 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
自我评价中英文语句
2013/11/30 职场文书
化学实验员岗位职责
2013/12/28 职场文书
运动会班级口号
2014/06/09 职场文书
经营理念口号
2014/06/21 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
检讨书范文
2015/01/27 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js