纯js实现录音与播放

2018年11月19日Web前端

最近在electron中想用录音实现对语音的翻译,想直接通过纯js实现录音与播放的功能。当然纯原生的话,代价就是要求浏览器的版本比较高了,具体可以查看readme,下面说下实现的原理和使用方法。

一、原理

主要分为三部分,

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

兼容性的话主要考虑的就是web audio apigetUserMediaTypedArrays的这几个方面了。

二、使用方法

script标签

支持以script标签的方式引入recorderjs,可以在window下全局访问:

let recorder = new Recorder();

npm方式

首先安装js-audio-recorder包,

npm i js-audio-recorder

然后再引用:

import Recorder from 'js-audio-recorder';

let recorder = new Recorder();

通用方法

api较为简单,目前只有如下几个:

// 开始录音
recorder.start();
// 结束录音
recorder.stop();
// 录音播放
recorder.play();

默认是16采样位数,16000采样频率,单声道的录音方式,详细地使用方式可以查看README

代码详细地址见:纯js实现录音与播放,欢迎提建议和star。

详细 API 地址:文档

在线demo地址:Recorder

三、其他资源

我的其他前端音频方面地学习文章,详细地址: