vue实现录音功能js-audio-recorder带波浪图效果的示例

当需要在Vue中展示录音并且需要带有波浪效果时，我们可以使用js-audio-recorder这个JavaScript库。下面将详细讲解如何在Vue中使用js-audio-recorder来实现录音功能，并带有波浪图效果的示例。

准备工作

在开始之前，我们需要进行准备工作：

1. 在Vue项目中安装js-audio-recorder
   npm install js-audio-recorder --save

2. 在main.js中全局引入js-audio-recorder

import AudioRecorder from 'js-audio-recorder';
window.AudioRecorder = AudioRecorder;

准备工作完成之后，我们就可以在Vue组件中使用js-audio-recorder来实现录音功能。

示例1 - 基础录音

下面是一个基础的录音示例，可以录制10秒钟的音频，录音完成后，可以通过播放按钮来播放录制的音频。

<template>
  <div>
    <div>
      <button @click="startRecording">开始录音</button>
      <button @click="stopRecording">停止录音</button>
    </div>
    <div>
      <button @click="playRecordedAudio">播放录制的音频</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        audioRecorder: null,
        recording: false,
        recordedAudioBlob: null
      }
    },
    mounted() {
      this.audioRecorder = new AudioRecorder();
      this.audioRecorder.onError = (err) => {
        console.error('Error:', err);
      }
      this.audioRecorder.onDataAvailable = (data) => {
        console.log('Data:', data);
        this.recordedAudioBlob = data;
      }
    },
    methods: {
      startRecording() {
        this.audioRecorder.start();
        this.recording = true;
        setTimeout(() => {
          this.stopRecording();
        }, 10000);
      },
      stopRecording() {
        this.audioRecorder.stop();
        this.recording = false;
      },
      playRecordedAudio() {
        const audioUrl = URL.createObjectURL(this.recordedAudioBlob);
        const audio = new Audio(audioUrl);
        audio.play();
      }
    }
  }
</script>

示例2 - 加入波浪效果

下面是一个加入波浪效果的示例。在这个示例中，我们使用了canvas来绘制波浪图，通过requestAnimationFrame方法来不断重绘波浪图。

<template>
  <div>
    <div>
      <button @mousedown.prevent="startRecording" @touchstart.prevent="startRecording">开始录音</button>
      <button @click="stopRecording">停止录音</button>
    </div>
    <div>
      <button @click="playRecordedAudio">播放录制的音频</button>
    </div>
    <div>
      <canvas ref="canvas" width="500" height="100"></canvas>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        audioRecorder: null,
        recording: false,
        recordedAudioBlob: null,
        animationId: null,
        canvasContext: null
      }
    },
    mounted() {
      this.audioRecorder = new AudioRecorder();
      this.audioRecorder.onError = (err) => {
        console.error('Error:', err);
      }
      this.audioRecorder.onDataAvailable = (data) => {
        console.log('Data:', data);
        this.recordedAudioBlob = data;
      }

      this.canvasContext = this.$refs.canvas.getContext('2d');
      this.drawWaveform();
    },
    methods: {
      startRecording() {
        this.audioRecorder.start();
        this.recording = true;
        this.animationId = requestAnimationFrame(this.drawWaveform);
      },
      stopRecording() {
        this.audioRecorder.stop();
        this.recording = false;
        cancelAnimationFrame(this.animationId);
      },
      playRecordedAudio() {
        const audioUrl = URL.createObjectURL(this.recordedAudioBlob);
        const audio = new Audio(audioUrl);
        audio.play();
      },
      drawWaveform() {
        this.canvasContext.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
        if (this.recording) {
          const analyser = this.audioRecorder.getAnalyser();
          const bufferLength = analyser.fftSize;
          const dataArray = new Float32Array(bufferLength);
          analyser.getFloatTimeDomainData(dataArray);
          let maxValue = 0;
          for (let i = 0; i < dataArray.length; i++) {
            const value = Math.abs(dataArray[i]);
            if (value > maxValue) {
              maxValue = value;
            }
          }
          const waveformHeight = this.$refs.canvas.height * 0.6;
          const coef = waveformHeight / maxValue;
          this.canvasContext.beginPath();
          this.canvasContext.lineWidth = 3;
          this.canvasContext.strokeStyle = 'blue';

          const sliceWidth = this.$refs.canvas.width * 1.0 / bufferLength;
          let x = 0;
          for (let i = 0; i < bufferLength; i++) {
            const value = dataArray[i];
            const y = (value * coef) + waveformHeight / 2;
            if (i === 0) {
              this.canvasContext.moveTo(x, y);
            } else {
              this.canvasContext.lineTo(x, y);
            }
            x += sliceWidth;
          }
          this.canvasContext.stroke();
          this.animationId = requestAnimationFrame(this.drawWaveform);
        } else {
          this.canvasContext.beginPath();
          this.canvasContext.lineWidth = 3;
          this.canvasContext.strokeStyle = 'black';
          this.canvasContext.moveTo(0, this.$refs.canvas.height / 2);
          this.canvasContext.lineTo(this.$refs.canvas.width, this.$refs.canvas.height / 2);
          this.canvasContext.stroke();
        }
      }
    }
}
</script>

<style scoped>
  canvas {
    border: 1px solid black;
  }
</style>

以上两个示例可以较好地解释如何使用js-audio-recorder来在Vue中实现录音功能，同时加入波浪效果。