<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 // 播放狀態(tài)
    };
  },
  mounted() {
    // 初始化音頻對象（指定默認(rèn)音頻文件）
    this.audio = new Audio('default-audio.mp3');
    
    // 監(jiān)聽音頻結(jié)束事件
    this.audio.addEventListener('ended', () => {
      this.isPlaying = false;
    });
  },
  methods: {
    // 切換播放/暫停
    togglePlay() {
      if (this.isPlaying) {
        this.audio.pause();
      } else {
        this.audio.play().catch(error => {
          // 處理瀏覽器自動播放限制（需用戶交互后觸發(fā)）
          console.error("播放失敗:", error);
        });
      }
      this.isPlaying = !this.isPlaying;
    },
    // 動態(tài)切換音頻源
    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']
});