基于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.alert 弹出式复选框实现代码
Jun 15 Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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 smarty 二级分类代码和模版循环例子
2011/06/01 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
图片按比例缩放函数
2006/06/26 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
python求最大连续子数组的和
2018/07/07 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
.net C#面试题
2012/08/28 面试题
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
销售总监岗位职责
2014/01/04 职场文书
高二物理教学反思
2014/02/08 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
Python基础之数据结构详解
2021/04/28 Python
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL