纯js完成web端灌音与播放功用

2019年9月1日 164次阅读来源: 2FPS

纯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
}