[TOC] ## 要點(小程序升級了) ### 點擊事件 ``` onMusic() { if (this.data.isPlay) { audio.pause(); this.setData({ isPlay: false }) } else { // audio.title = this.properties.title; audio.src = this.properties.musicUrl; this.setData({ isPlay: true }) } } ``` ### 恢復音樂函數 ``` //當重新進入頁面 恢復音樂 播放或暫停 _recoveryMusic() { //如果監聽到的src 與 properties的musicUrl相同時 讓音樂播放 if (audio.src == this.properties.musicUrl) { this.setData({ isPlay: true }) } //如果監聽到的 paused(audio的屬性) 為true時 設置isPlay為false if (audio.paused) { this.setData({ isPlay: false }) } }, ``` ### 監聽音樂函數 讓監聽與播放保持一致 ``` //監聽音樂 _monitorMusic() { //監聽音頻播放事件 audio.onPlay(() => { this.setData({ isPlay: true }) }) //監聽音頻暫停事件 audio.onPause(() => { this.setData({ isPlay: false }) }) //監聽音頻停止事件 audio.onStop(() => { this.setData({ isPlay: false }) }) //監聽音頻自然播放至結束的事件 audio.onEnded(() => { this.setData({ isPlay: false }) }) } ``` ### 調用函數 ``` //當組件觸發 attached 生命周期時，會依次觸發 my-behavior 中的 attached 生命周期函數和 my-component 中的 attached 生命周期函數 attached() { this._recoveryMusic(); this._monitorMusic(); } ``` # 完整js ``` // components/classic/music/index.js const audio = wx.getBackgroundAudioManager() Component({ /** * 組件的屬性列表 */ properties: { content: { type: String }, image: { type: String }, musicUrl: { type: String } }, /** * 組件的初始數據 */ data: { isPlay: false }, /** * 組件的方法列表 */ methods: { onMusic() { if (this.data.isPlay) { audio.pause(); this.setData({ isPlay: false }) } else { // audio.title = this.properties.title; audio.src = this.properties.musicUrl; this.setData({ isPlay: true }) } }, //當重新進入頁面 恢復音樂 播放或暫停 _recoveryMusic() { //如果監聽到的src 與 properties的musicUrl相同時 讓音樂播放 if (audio.src == this.properties.musicUrl) { this.setData({ isPlay: true }) } //如果監聽到的 paused(audio的屬性) 為true時 設置isPlay為false if (audio.paused) { this.setData({ isPlay: false }) } }, //監聽音樂 _monitorMusic() { //監聽音頻播放事件 audio.onPlay(() => { this.setData({ isPlay: true }) }) //監聽音頻暫停事件 audio.onPause(() => { this.setData({ isPlay: false }) }) //監聽音頻停止事件 audio.onStop(() => { this.setData({ isPlay: false }) }) //監聽音頻自然播放至結束的事件 audio.onEnded(() => { this.setData({ isPlay: false }) }) } }, //當組件觸發 attached 生命周期時，會依次觸發 my-behavior 中的 attached 生命周期函數和 my-component 中的 attached 生命周期函數 attached() { this._recoveryMusic(); this._monitorMusic(); } }) ```