Vue 3 音频录制组件详解

引言

音频录制是现代Web应用中常见的功能之一。本博客将详细介绍如何使用 Vue 3 和 Web API 实现一个简单的音频录制组件。我们将逐步解释每个功能点，包括获取用户媒体设备权限、初始化 MediaRecorder、开始/停止录音、录音数据处理以及资源释放。

技术背景

在构建音频录制组件时，我们使用了 Vue 3 框架以及Web API中的 MediaRecorder 和 getUserMedia 方法。MediaRecorder 用于处理音频录制，而 getUserMedia 用于获取用户媒体设备的权限，这里是音频输入设备。

1. 获取用户媒体设备权限

try {
  stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  console.log('授权成功！');
} catch (error) {
  console.error('获取音频输入设备失败：', error);
}

首先，我们尝试获取用户音频输入设备的权限。通过 navigator.mediaDevices.getUserMedia 方法，我们请求用户允许访问音频设备。如果用户授权成功，我们将得到一个音频输入流。

2. 初始化 MediaRecorder

mediaRecorder.value = new MediaRecorder(stream);
mediaRecorder.value.ondataavailable = (e) => {
  chunks.value.push(e.data);
}

mediaRecorder.value.onstop = () => {
  const blob = new Blob(chunks.value, { type: 'audio/mp3; codecs=opus' });
  const file = new File([blob], 'audio.mp3', { type: blob.type });
  chunks.value = [];
  audioURL.value = URL.createObjectURL(file);
}

我们使用 MediaRecorder 对象处理音频录制。设置 ondataavailable 事件监听器来收集录制的音频数据，而 onstop 事件监听器用于处理录音结束时的操作。在这里，我们将录音数据组装成 Blob 对象，创建 File 对象，并使用 URL.createObjectURL 创建音频文件的 URL，最后将其赋值给 audioURL。

3. 开始/停止录音

const toggleRecording = () => {
  if (recording.value) {
    mediaRecorder.value.stop();
    recording.value = false;
  } else {
    mediaRecorder.value.start();
    recording.value = true;
  }
}

toggleRecording 函数用于开始或停止录音，根据 recording 变量的状态进行相应的操作。开始录音时调用 mediaRecorder.value.start()，停止录音时调用 mediaRecorder.value.stop()。

4. 资源释放

const closeStream = (stream) => {
  if (stream) {
    stream.getTracks().forEach((track) => track.stop());
  }
}

onUnmounted(() => {
  closeStream(stream);
});

closeStream 函数用于关闭音频输入流。在组件销毁前，通过 onUnmounted 钩子调用 closeStream 函数，确保释放音频输入设备资源，防止内存泄漏。

结论

通过这个 Vue 3 音频录制组件的实例，我们了解了如何利用 Vue 3 和 Web API 来实现一个简单而功能强大的音频录制工具。从获取用户媒体设备权限到录音数据的处理，再到资源的释放，每个步骤都得到了详细解释。这个组件可以作为一个基础，进一步扩展和定制以满足不同应用的需求。

完整代码

<template>
  <div>
    <button @click="toggleRecording">{{ recording ? '停止录音' : '开始录音' }}</button>
    <audio class="audio-player" controls :src="audioURL" preload="auto"></audio>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const recording = ref(false)
const mediaRecorder = ref(null)
const chunks = ref([])
const audioURL = ref('')
let stream
onMounted(async () => {
  try {
    stream = await navigator.mediaDevices.getUserMedia({ audio: true })
    console.log('授权成功！')
    mediaRecorder.value = new MediaRecorder(stream)
    mediaRecorder.value.ondataavailable = (e) => {
      chunks.value.push(e.data)
    }

    mediaRecorder.value.onstop = () => {
      const blob = new Blob(chunks.value, { type: 'audio/mp3; codecs=opus' })
      const file = new File([blob], 'audio.mp3', { type: blob.type })
      chunks.value = []
      audioURL.value = URL.createObjectURL(file)
    }
  } catch (error) {
    console.error('获取音频输入设备失败：', error)
  }
})

const toggleRecording = () => {
  if (recording.value) {
    mediaRecorder.value.stop()
    recording.value = false
  } else {
    mediaRecorder.value.start()
    recording.value = true
  }
}

const closeStream = (stream) => {
  if (stream) {
    console.log(stream.getTracks())
    stream.getTracks().forEach((track) => track.stop())
  }
}

onUnmounted(() => {
  closeStream(stream)
})
</script>

参考文献

1. Vue 3 Documentation
2. MediaRecorder API
3. getUserMedia API