Vue页面中播放音频文件的方法详解

<template>
  <div>
    <!-- 播放控制按钮 -->
    <button @click="togglePlay">
      {{ isPlaying ? '暂停' : '播放' }}
    </button>
    
    <!-- 切换音频源示例 -->
    <button @click="changeAudioSource('new-audio.mp3')">
      切换语音
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      audio: null,     // 存储音频对象
      isPlaying: false // 播放状态
    };
  },
  mounted() {
    // 初始化音频对象（指定默认音频文件）
    this.audio = new Audio('default-audio.mp3');
    
    // 监听音频结束事件
    this.audio.addEventListener('ended', () => {
      this.isPlaying = false;
    });
  },
  methods: {
    // 切换播放/暂停
    togglePlay() {
      if (this.isPlaying) {
        this.audio.pause();
      } else {
        this.audio.play().catch(error => {
          // 处理浏览器自动播放限制（需用户交互后触发）
          console.error("播放失败:", error);
        });
      }
      this.isPlaying = !this.isPlaying;
    },
    // 动态切换音频源
    changeAudioSource(newSrc) {
      this.audio.pause();
      this.isPlaying = false;
      this.audio.src = newSrc;
      this.audio.load(); // 重新加载新音频
    }
  },
  beforeDestroy() {
    // 组件销毁时释放音频资源
    this.audio.pause();
    this.audio = null;
  }
};
</script>

npm install howler

<template>
  <div>
    <button @click="togglePlay">
      {{ isPlaying ? '暂停' : '播放' }}
    </button>
  </div>
</template>

<script>
import { Howl } from 'howler';

export default {
  data() {
    return {
      sound: null,     // Howl 实例
      isPlaying: false
    };
  },
  mounted() {
    // 初始化音频
    this.sound = new Howl({
      src: ['audio-file.mp3'],
      html5: true,    // 使用 HTML5 Audio 提升兼容性
      onend: () => {
        this.isPlaying = false;
      }
    });
  },
  methods: {
    togglePlay() {
      if (this.isPlaying) {
        this.sound.pause();
      } else {
        this.sound.play();
      }
      this.isPlaying = !this.isPlaying;
    }
  },
  beforeDestroy() {
    // 清理资源
    this.sound.stop();
    this.sound = null;
  }
};
</script>

this.sound = new Howl({
  src: ['audio.mp3', 'audio.ogg']
});