我們在使用音頻播放功能的時候，通常都會遇到需要關(guān)閉播放的情況，這時候就需要用到Vue Audio。

import VueAudio from 'vue-audio';
export default {
components: {
VueAudio
},
data () {
return {
isPlaying: false
}
},
methods: {
togglePlay () {
this.isPlaying = !this.isPlaying;
},
stopPlay () {
this.isPlaying = false;
}
}
}

首先，我們需要在Vue項目中安裝Vue Audio。在代碼中導(dǎo)入Vue Audio，并在組件中注冊。在data中添加isPlaying屬性以及togglePlay和stopPlay兩個方法。

播放/暫停停止

然后，在視圖中添加vue-audio標簽，設(shè)置src屬性為音樂文件地址，設(shè)置autoplay屬性為isPlaying。同時，在按鈕上添加相應(yīng)的事件綁定togglePlay和stopPlay方法。

togglePlay () {
const audio = this.$refs.audio;
if (this.isPlaying) {
audio.pause();
} else {
audio.play();
}
this.isPlaying = !this.isPlaying;
},
stopPlay () {
const audio = this.$refs.audio;
audio.currentTime = 0;
audio.pause();
this.isPlaying = false;
}

在togglePlay方法中，首先獲取音頻元素，然后判斷當前是否在播放狀態(tài)。如果正在播放，調(diào)用pause方法暫停播放；如果未在播放狀態(tài)，調(diào)用play方法開始播放。最后設(shè)置isPlaying狀態(tài)為相反的值，以保證下一次點擊時切換狀態(tài)。

在stopPlay方法中，同樣獲取音頻元素，將其currentTime設(shè)置為0，即回到音頻文件的起始處，并暫停播放。同時設(shè)置isPlaying狀態(tài)為false，則在下一次點擊播放按鈕時會重新開始播放。

通過上述代碼，可以實現(xiàn)對音頻播放的控制，包括播放、暫停和停止。對于Vue Audio的使用，也是非常方便簡潔的。