Vue input上传音频并播放

<template>
  <div>
    <input type="file" ref="audioInput" @change="handleFileUpload">
    <button @click="handleFileSelect">选择音频文件</button>
    <button @click="playAudio">播放音频</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      audioContext: null,
      audioBuffer: null,
      audioSource: null,
      audioFile: null
    }
  },
  methods: {
    handleFileSelect() {
      this.$refs.audioInput.click()
    },
    handleFileUpload(event) {
      // 获取上传的音频文件
      this.audioFile = event.target.files[0]

      // 创建新的音频上下文
      this.audioContext = new AudioContext()

      let reader = new FileReader()
      reader.onload = e => {
        let audioData = e.target.result

        // 解码音频数据
        this.audioContext.decodeAudioData(audioData, buffer => {
          this.audioBuffer = buffer
          this.playAudio()
        }, error => {
          console.error('音频解码错误', error)
        })
      }
      reader.readAsArrayBuffer(this.audioFile)
    },
    playAudio() {
      // 停止正在播放的音频
      if (this.audioSource) {
        this.audioSource.stop()
      }

      // 创建音频源并开始播放
      this.audioSource = this.audioContext.createBufferSource()
      this.audioSource.buffer = this.audioBuffer
      this.audioSource.loop = false
      this.audioSource.connect(this.audioContext.destination)
      this.audioSource.start()
    }
  }
}
</script>