当前位置：首页 > VUE

vue实现录音

2026-03-28 00:13:34VUE

Vue 实现录音功能

在 Vue 中实现录音功能通常需要借助浏览器的 MediaRecorder API 和 getUserMedia 方法。以下是具体实现步骤：

获取用户麦克风权限

使用 navigator.mediaDevices.getUserMedia 请求麦克风访问权限。该方法返回一个 Promise，成功后会得到音频流。

async function requestMicrophone() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    return stream;
  } catch (error) {
    console.error('麦克风访问被拒绝:', error);
    return null;
  }
}

初始化录音器

通过 MediaRecorder 实例化录音对象，并监听数据存储事件。

vue实现录音

function setupRecorder(stream) {
  const mediaRecorder = new MediaRecorder(stream);
  const audioChunks = [];

  mediaRecorder.ondataavailable = (event) => {
    if (event.data.size > 0) {
      audioChunks.push(event.data);
    }
  };

  return { mediaRecorder, audioChunks };
}

控制录音开始与结束

调用 mediaRecorder.start() 和 mediaRecorder.stop() 控制录音流程。停止录音后，将音频数据转为可播放格式（如 Blob 或 URL）。

function startRecording(mediaRecorder) {
  mediaRecorder.start();
}

function stopRecording(mediaRecorder, audioChunks) {
  return new Promise((resolve) => {
    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
      const audioUrl = URL.createObjectURL(audioBlob);
      resolve(audioUrl);
    };
    mediaRecorder.stop();
  });
}

在 Vue 组件中集成

将上述逻辑封装到 Vue 组件的 methods 中，并通过按钮触发录音操作。

vue实现录音

export default {
  data() {
    return {
      isRecording: false,
      audioUrl: null,
      mediaRecorder: null,
      audioChunks: [],
    };
  },
  methods: {
    async toggleRecording() {
      if (!this.isRecording) {
        const stream = await requestMicrophone();
        if (stream) {
          const { mediaRecorder, audioChunks } = setupRecorder(stream);
          this.mediaRecorder = mediaRecorder;
          this.audioChunks = audioChunks;
          startRecording(mediaRecorder);
          this.isRecording = true;
        }
      } else {
        this.audioUrl = await stopRecording(this.mediaRecorder, this.audioChunks);
        this.isRecording = false;
      }
    },
  },
};

模板部分

添加按钮和音频播放控件，绑定组件数据和方法。

<template>
  <div>
    <button @click="toggleRecording">
      {{ isRecording ? '停止录音' : '开始录音' }}
    </button>
    <audio v-if="audioUrl" :src="audioUrl" controls></audio>
  </div>
</template>

注意事项

兼容性：MediaRecorder API 在部分旧浏览器中不支持，需检查兼容性或使用 polyfill。
HTTPS 环境：getUserMedia 仅在 HTTPS 或 localhost 环境下生效。
音频格式：默认生成的音频格式可能因浏览器而异，可通过 mimeType 参数指定（如 audio/webm）。

完整代码示例

以下是一个完整的 Vue 3 组件示例：

<template>
  <div>
    <button @click="toggleRecording">
      {{ isRecording ? '停止录音' : '开始录音' }}
    </button>
    <audio v-if="audioUrl" :src="audioUrl" controls></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRecording: false,
      audioUrl: null,
      mediaRecorder: null,
      audioChunks: [],
    };
  },
  methods: {
    async toggleRecording() {
      if (!this.isRecording) {
        try {
          const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
          this.mediaRecorder = new MediaRecorder(stream);
          this.audioChunks = [];

          this.mediaRecorder.ondataavailable = (event) => {
            if (event.data.size > 0) {
              this.audioChunks.push(event.data);
            }
          };

          this.mediaRecorder.start();
          this.isRecording = true;
        } catch (error) {
          console.error('录音失败:', error);
        }
      } else {
        this.mediaRecorder.stop();
        this.mediaRecorder.onstop = () => {
          const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
          this.audioUrl = URL.createObjectURL(audioBlob);
          this.isRecording = false;
        };
      }
    },
  },
};
</script>

标签: vue