Vue 提供了一系列的事件來幫助我們控制音頻（audio）的播放行為。下面是幾種常用的事件，以及對應的使用場景和代碼示例。

1. loadeddata: 在音頻加載完成后觸發。可以用來檢測音頻是否已經準備就緒，以便于執行一些初始化操作。

export default {
data() {
return {
isReady: false, // 是否已經準備就緒
};
},
methods: {
handleLoadedData() { // loadeddata 事件的處理函數
this.isReady = true; // 設置準備就緒狀態為 true
},
},
mounted() {
const audio = this.$refs.audio; // 獲取 audio 元素
audio.addEventListener('loadeddata', this.handleLoadedData); // 添加 loadeddata 事件監聽
},
};

2. play: 在音頻開始播放時觸發。常用于顯示播放狀態以及更新進度條等操作。

export default {
methods: {
handlePlay() { // play 事件的處理函數
this.isPlaying = true; // 設置播放狀態為 true
},
},
mounted() {
const audio = this.$refs.audio; // 獲取 audio 元素
audio.addEventListener('play', this.handlePlay); // 添加 play 事件監聽
},
};

3. pause: 在音頻暫停時觸發。常用于更新播放狀態以及暫停進度條等操作。

export default {
methods: {
handlePause() { // pause 事件的處理函數
this.isPlaying = false; // 設置播放狀態為 false
},
},
mounted() {
const audio = this.$refs.audio; // 獲取 audio 元素
audio.addEventListener('pause', this.handlePause); // 添加 pause 事件監聽
},
};

4. ended: 在音頻播放結束時觸發。常用于設置下一曲等操作。

export default {
methods: {
handleEnded() { // ended 事件的處理函數
this.currentTrack++; // 切換到下一曲
this.playAudio();
},
playAudio() {
this.audio.src = this.tracks[this.currentTrack].src; // 設置音頻鏈接
this.audio.play(); // 播放音頻
},
},
mounted() {
const audio = this.$refs.audio; // 獲取 audio 元素
audio.addEventListener('ended', this.handleEnded); // 添加 ended 事件監聽
this.playAudio(); // 啟動播放
},
};