基于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 相关文章推荐
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 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
PHP完整的日历类(CLASS)
2006/11/27 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python分析apache访问日志脚本分享
2015/02/26 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python制作简单五子棋游戏
2019/06/18 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
手机业务员岗位职责
2013/12/13 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
活动总结格式范文
2014/04/26 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
公司员工离职感言
2015/08/03 职场文书
Python pyecharts绘制条形图详解
2022/04/02 Python