js-audio-recorder录音播放波形图

js-audio-recorder录音播放波形图

安装：

npm i js-audio-recorder

调用：

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

首先，要用到两个canvas标签

<canvas id="recordCanvas" ref="record"></canvas>
data() {
    return {
        recorder: null, // 录音
        drawRecordId: null,
        drawPlayId: null,
    }
},
mounted(){
    this.recorder = new Recorder()
}

其次，录音波形和播放波形，要用不同的方法获取，getRecordAnalyseData() 和 getPlayAnalyseData()

// 开始录音
handleStart() {
    this.recorder = new Recorder()
     Recorder.getPermission().then(() => {this.recorder.start().then(() => {
             this.drawRecord();
         })
     }, (error) => {
         console.log(`${error.name} : ${error.message}`)
     })
 },
 // 停止录音
 handleStop() {this.recorder.stop()
     this.drawRecordId && cancelAnimationFrame(this.drawRecordId);
     this.drawRecordId = null;
 },
 // 播放录音
 handlePlay() {this.recorder.play()
     this.drawPlay(); 
 },

最后，录音完了，要将 drawRecordId 和 drawPlayId 销毁

// 录音波浪图
        drawRecord(){
            // 用requestAnimationFrame稳定60fps绘制
            this.drawRecordId = requestAnimationFrame(this.drawRecord)
            this.drawWave({
                canvas: this.$refs.record,
                dataArray: this.recorder.getRecordAnalyseData(),
            });
        },
        // 播放波浪图
        drawPlay(){
            // 用requestAnimationFrame稳定60fps绘制
            this.drawPlayId = requestAnimationFrame(this.drawPlay);
            this.drawWave({
                canvas: this.$refs.play,
                dataArray: this.recorder.getPlayAnalyseData(),
            });
        },
        // 绘制波形图
        drawWave({canvas, dataArray}) {
            const ctx = canvas.getContext("2d");
            const bufferLength = dataArray.length;
            // 填充背景色
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            // 设定波形绘制颜色
            ctx.lineWidth = 2;
            ctx.strokeStyle = "#409EFF";
            ctx.beginPath();
            var sliceWidth = (canvas.width * 1.0) / bufferLength, // 一个点占多少位置，共有bufferLength个点要绘制
                x = 0; // 绘制点的x轴位置
            for (var i = 0; i < bufferLength; i++) {
                var v = dataArray[i] / 128.0;
                var y = (v * canvas.height) / 2;
                if (i === 0) {
                    // 第一个点
                    ctx.moveTo(x, y);
                } else {
                    // 剩余的点
                    ctx.lineTo(x, y);
                }
                // 依次平移，绘制所有点
                x += sliceWidth;
            }
            ctx.lineTo(canvas.width, canvas.height / 2);
            ctx.stroke();
        },