基于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脚本实现Web页面信息交互
Oct 11 Javascript
js函数般调用正则
Apr 08 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
vue实现商城购物车功能
Nov 27 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
JS实现canvas简单小画板功能
Jun 23 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配置文件中最常用四个ini函数
2007/03/19 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
php include类文件超时问题处理
2015/02/06 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
js控制frameSet示例
2013/09/10 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
js实现蒙版效果
2020/01/11 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
python关键字and和or用法实例
2015/05/28 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
python运行时间的几种方法
2016/06/17 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
用Python解数独的方法示例
2019/10/24 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
python 实现图片批量压缩的示例
2020/12/18 Python
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
教师求职信范文分享
2013/12/27 职场文书
观看信仰心得体会
2014/09/04 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
确保工程质量承诺书
2015/04/29 职场文书
Docker部署Mysql8的实现步骤
2022/07/07 Servers