vue使用recorder.js实现录音功能

下面是“Vue使用Recorder.js实现录音功能”的完整攻略：

1.引入Recorder.js

首先，在Vue项目中，需要引入Recorder.js。可以在项目中使用npm进行安装，也可以直接引入官方的Recorder.js文件：

<script src="https://cdn.jsdelivr.net/gh/mattdiamond/Recorderjs/recorder.js"></script>

2.创建录音组件

在Vue项目中，为了便于管理和维护，我们通常会将不同的功能区分为不同的组件。因此，在创建录音功能之前，需要先创建录音组件：

<template>
  <div>
    <button @click="startRecording">开始录音</button>
    <button @click="stopRecording">停止录音</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recorder: null, // Recorder.js实例
      audioContext: null // 音频上下文
    }
  },
  methods: {
    startRecording() {
      // 开始录音
    },
    stopRecording() {
      // 停止录音
    }
  }
}
</script>

在上面的代码中，我们创建了一个包含开始录音和停止录音按钮的组件。同时，在data中定义了Recorder.js实例和音频上下文。

3.初始化录音

在startRecording方法中，需要初始化Recorder.js实例和音频上下文：

startRecording() {
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      const audioContext = new AudioContext()
      const input = audioContext.createMediaStreamSource(stream)
      this.recorder = new Recorder(input, { numChannels: 1 })
      this.audioContext = audioContext

      this.recorder.record()
    })
    .catch(err => console.error(err))
},

在上面的代码中，使用navigator.mediaDevices.getUserMedia方法获取音频流，然后创建音频上下文和音频输入节点。最后，使用Recorder.js创建实例，并使用recorder.record()开始录音。

4.停止录音

在stopRecording方法中，需要停止录音并将录音结果导出为Blob格式的数据：

stopRecording() {
  this.recorder.stop()
  this.recorder.exportWAV(blob => {
    // 将录音结果导出为Blob格式的数据，可以传递到后端进行处理
    console.log(blob)
    // 释放资源
    this.audioContext.close()
    this.recorder.clear()
    this.recorder = null
    this.audioContext = null
  })
},

在上面的代码中，调用recorder.stop()停止录音，然后使用recorder.exportWAV方法将录音结果导出为Blob格式的数据。最后，释放使用的资源。

示例1：录音上传

下面是一个将录制的音频文件上传到后端服务器的示例：

<template>
  <div>
    <button :disabled="recording" @click="startRecording">开始录音</button>
    <button :disabled="!recording" @click="stopRecording">停止录音</button>
    <button :disabled="recording || !audio" @click="uploadAudio">上传音频</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recorder: null,
      audioContext: null,
      recording: false,
      audio: null
    }
  },
  methods: {
    startRecording() {
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          const audioContext = new AudioContext()
          const input = audioContext.createMediaStreamSource(stream)
          this.recorder = new Recorder(input, { numChannels: 1 })
          this.audioContext = audioContext

          this.recorder.record()
          this.recording = true
        })
        .catch(err => console.error(err))
    },
    stopRecording() {
      this.recorder.stop()
      this.recorder.exportWAV(blob => {
        this.audio = blob
        this.recording = false

        this.recorder.clear()
        this.recorder = null
        this.audioContext.close()
        this.audioContext = null
      })
    },
    uploadAudio() {
      const formData = new FormData()
      formData.append('audio', this.audio, 'recording.wav') // 将录音结果作为formData的一个属性

      axios.post('/uploadAudio', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
        .then(res => {
          console.log(res.data)
          this.audio = null
        })
        .catch(err => console.error(err))
    }
  }
}
</script>

在上面的代码中，新增了一个uploadAudio方法用于上传录制的音频文件。该方法使用了axios库发送post请求，并将录音结果作为formData的一个属性。

示例2：录音播放

下面是一个录制后可以在页面上播放的示例：

<template>
  <div>
    <button :disabled="recording" @click="startRecording">开始录音</button>
    <button :disabled="!recording" @click="stopRecording">停止录音</button>
    <button :disabled="recording || !audio" @click="playAudio">播放音频</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recorder: null,
      audioContext: null,
      recording: false,
      audio: null,
      audioUrl: null
    }
  },
  methods: {
    startRecording() {
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          const audioContext = new AudioContext()
          const input = audioContext.createMediaStreamSource(stream)
          this.recorder = new Recorder(input, { numChannels: 1 })
          this.audioContext = audioContext

          this.recorder.record()
          this.recording = true
        })
        .catch(err => console.error(err))
    },
    stopRecording() {
      this.recorder.stop()
      this.recorder.exportWAV(blob => {
        this.audio = blob
        this.recording = false

        this.recorder.clear()
        this.recorder = null
        this.audioContext.close()
        this.audioContext = null
      })
    },
    playAudio() {
      const audioUrl = URL.createObjectURL(this.audio)
      const audio = new Audio(audioUrl)
      audio.play()
      this.audioUrl = audioUrl
    }
  }
}
</script>

在上面的代码中，新增了一个playAudio方法用于播放录制的音频文件。该方法使用了HTML5的Audio对象，并使用URL.createObjectURL将Blob格式的音频文件转换成URL格式。最后，使用audio.play()方法播放录音结果。