当前位置：首页 > VUE

vue实现录音文件播放

2026-02-09 18:06:30VUE

实现录音文件播放的基本步骤

在Vue中实现录音文件播放，通常需要结合HTML5的AudioContext API或<audio>标签。以下是两种常见方法的详细说明。

使用HTML5 `<audio>`标签

HTML5的<audio>标签是最简单的实现方式，适合播放已录制的音频文件。

<template>
  <div>
    <audio ref="audioPlayer" controls></audio>
    <button @click="playRecordedAudio">播放录音</button>
  </div>
</template>

<script>
export default {
  methods: {
    playRecordedAudio() {
      const audioPlayer = this.$refs.audioPlayer;
      audioPlayer.src = URL.createObjectURL(this.recordedBlob); // recordedBlob为录音的Blob对象
      audioPlayer.play();
    }
  }
};
</script>

使用Web Audio API

如果需要更高级的音频处理（如可视化、音效等），可以使用Web Audio API。

<template>
  <div>
    <button @click="playAudio">播放录音</button>
  </div>
</template>

<script>
export default {
  methods: {
    playAudio() {
      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
      const source = audioContext.createBufferSource();

      // 假设recordedBlob是录音的Blob对象
      const reader = new FileReader();
      reader.onload = (event) => {
        audioContext.decodeAudioData(event.target.result, (buffer) => {
          source.buffer = buffer;
          source.connect(audioContext.destination);
          source.start(0);
        });
      };
      reader.readAsArrayBuffer(this.recordedBlob);
    }
  }
};
</script>

录音与播放结合

以下是一个完整的录音并播放的示例，使用MediaRecorder API录音，并通过<audio>标签播放。

vue实现录音文件播放

<template>
  <div>
    <button @click="startRecording">开始录音</button>
    <button @click="stopRecording">停止录音</button>
    <button @click="playRecording">播放录音</button>
    <audio ref="audioPlayer" controls></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      recordedChunks: [],
      recordedBlob: null
    };
  },
  methods: {
    async startRecording() {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      this.mediaRecorder = new MediaRecorder(stream);
      this.mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          this.recordedChunks.push(event.data);
        }
      };
      this.mediaRecorder.start();
    },
    stopRecording() {
      this.mediaRecorder.stop();
      this.mediaRecorder.onstop = () => {
        this.recordedBlob = new Blob(this.recordedChunks, { type: 'audio/wav' });
        this.recordedChunks = [];
      };
    },
    playRecording() {
      const audioPlayer = this.$refs.audioPlayer;
      audioPlayer.src = URL.createObjectURL(this.recordedBlob);
      audioPlayer.play();
    }
  }
};
</script>