web录音播放，基于MediaDevices.getUserMedia()开发

vue2、vue3均适用

vue3代码：

<template>
  <div>
    <button @click="startRecording" :disabled="recording">开始录音</button>
    <button ref="buttonRef" @click="stopRecording" :disabled="!recording">停止录音</button>
    <audio ref="audioRef" controls></audio>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'audioView',
  setup() {
    const recording = ref(false)
    const mediaStream = ref(null)
    const mediaRecorder = ref(null)
    const audioChunks = ref()
    const audioRef = ref(null)

    const startRecording = async () => {
      try {
        // 获取用户麦克风权限
        mediaStream.value = await navigator.mediaDevices.getUserMedia({
          audio: true
        })
        // 创建一个 MediaRecorder 实例
        mediaRecorder.value = new MediaRecorder(mediaStream.value)
        audioChunks.value = []

        // 当录音数据可用时触发事件
        mediaRecorder.value.ondataavailable = (event) => {
          if (event.data.size > 0) {
            audioChunks.value.push(event.data)
            playAudio()
          }
        }
        /** 开始录音 */
        mediaRecorder.value.start()
        recording.value = true
      } catch (error) {
        console.error('获取麦克风权限失败:', error)
      }
    }

    const stopRecording = () => {
      if (mediaRecorder.value) {
        // 停止录音
        mediaRecorder.value.stop()
        // 停止麦克风访问
        mediaStream.value.getTracks().forEach((track) => track.stop())
        recording.value = false
      }
    }

    const audioData = ref(null)

    /** 上传录音文件 */
    const uploadRecording = async (audioData) => {
      const formData = new FormData()
      formData.append('audio', audioData)
      try {
        // 使用 Axios 发送录音文件到后端
        // const response = await xxx("YOUR_BACKEND_API_URL", formData);
        // console.log("文件上传成功:", response.data);
      } catch (error) {
        console.error('文件上传失败:', error)
      }
    }

    // 录音文件流转换
    const playAudio = () => {
      // 创建 Blob 对象并生成音频文件的 URL
      const audioBlob = new Blob(audioChunks.value, {
        type: 'audio/webm'
      })

      /** 播放录音文件 */
      audioRef.value.src = URL.createObjectURL(audioBlob)
      uploadRecording(audioBlob)
    }

    return {
      audioData,
      uploadRecording,
      audioRef,
      recording,
      startRecording,
      stopRecording
    }
  }
}
</script>

<style></style>

Gitee链接