js实现录音和音频播放-附示例

js录音和音频播放的实现借助html5.0的相关api来实现，请尽量在server容器内启动并且支持麦克风设备的浏览器中测试。

实例构造

1. 安装方式

npm i js-audio-recorder

import Recorder from 'js-audio-recorder';
let recorder = new Recorder();

 2.构造函数属性
 

let recorder = new Recorder({
    sampleBits: 16,         // 采样位数，支持 8 或 16，默认是16
    sampleRate: 16000,      // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
    numChannels: 1,         // 声道，支持 1 或 2， 默认是1
    compiling: false,       // 是否边录边转换，默认是false
});

3.实例属性

recorder.duration
recorder.fileSize

4.获取录音数据

//录音实时获取数据
recorder.onprogress = function(params) {
    console.log(params.data);       // 当前获取到到音频数据
}
//主动获取
recorder.getWholeData();
recorder.getNextData();

API

recorder.start().then(() => {
    // 开始录音
}, (error) => {
    // 出错了
    console.log(`${error.name} : ${error.message}`);
});

recorder.pause();

recorder.resume()

recorder.stop();

recorder.play();

recorder.getPlayTime();

recorder.pausePlay();

recorder.resumePlay();

recorder.stopPlay();

// 销毁录音实例，置为null释放资源，fn为回调函数，
recorder.destroy().then(function() {
    recorder = null;
});

Event

recorder.onprogress = function(params) {
    console.log('录音时长(秒)', params.duration);
    console.log('录音大小(字节)', params.fileSize);
    console.log('录音音量百分比(%)', params.vol);
    // console.log('当前录音的总数据([DataView, DataView...])', params.data);
}
recorder.onplay = () => {
    console.log('onplay')
}
recorder.onpauseplay = () => {
    console.log('onpauseplay')
}
recorder.onresumeplay = () => {
    console.log('onresumeplay')
}
recorder.onstopplay = () => {
    console.log('onstopplay')
}
recorder.onplayend = () => {
    console.log('onplayend')
}

Player 播放类

import Player from './player/player';

Player 用于协助播放录音文件，包括，开始、暂停、恢复、停止等功能。所支持的格式由浏览器的audio支持的类型决定。可单独使用。

Player.play([arraybuffer])
播放外部的音频。所支持的格式由浏览器的audio支持的类型决定。

Player.pausePlay()
暂停播放。

Player.resumePlay()
恢复播放。

Player.stopPlay()
停止播放。

Player.addPlayEnd(fn)
增加播放完成回调函数。

Player.getPlayTime()
获取播放时间。

Player.getAnalyseData()
获取回放录音的波形数据。

示例源码：https://recorder.zhuyuntao.cn/