[TOC] 音樂播放帶旋轉 ## 要點 * 獲取背景音樂 ``` wx.getBackgroundAudioManager(); ``` * 點擊播放 ``` onMusic(){ if (this.data.isPlay){ this.setData({ isPlay:false }) audio.pause(); } else{ audio.title = this.properties.title; audio.src = this.properties.url; this.setData({ isPlay:true }) } } ``` * 監聽與頁面保持一致 * attached 函數 你不在method里 ``` //當組件觸發 attached 生命周期時，會依次觸發 my-behavior 中的 attached 生命周期函數和 my-component 中的 attached 生命周期函數 attached(){ //監聽音頻播放事件 audio.onPlay(()=>{ this.setData({ isPlay:true }) }) //監聽音頻暫停事件 audio.onPause(()=>{ this.setData({ isPlay:false }) }) //監聽音頻停止事件 audio.onStop(()=>{ this.setData({ isPlay:false }) }) //監聽音頻自然播放至結束的事件 audio.onEnded(()=>{ this.setData({ isPlay:false }) }) } ``` # 具體代碼 ## js ``` const audio = wx.getBackgroundAudioManager(); Component({ /** * 組件的屬性列表 */ properties: { title: String, url: String }, behaviors:[common], /** * 組件的初始數據 */ data: { isPlay:false }, /** * 組件的方法列表 */ methods: { onMusic(){ if (this.data.isPlay){ this.setData({ isPlay:false }) audio.pause(); } else{ audio.title = this.properties.title; audio.src = this.properties.url; this.setData({ isPlay:true }) } } }, //當組件觸發 attached 生命周期時，會依次觸發 my-behavior 中的 attached 生命周期函數和 my-component 中的 attached 生命周期函數 attached(){ //監聽音頻播放事件 audio.onPlay(()=>{ this.setData({ isPlay:true }) }) //監聽音頻暫停事件 audio.onPause(()=>{ this.setData({ isPlay:false }) }) //監聽音頻停止事件 audio.onStop(()=>{ this.setData({ isPlay:false }) }) //監聽音頻自然播放至結束的事件 audio.onEnded(()=>{ this.setData({ isPlay:false }) }) } }) ``` ## wxml ``` <view class='music' > <image src="/images/banner.png" class="banner {{isPlay?'rotate':''}}" ></image> <image src="{{isPlay?'/images/play.png':'/images/pause.png'}}" class='music-img' bind:tap="onMusic"></image> </view> ``` ## wxss ``` .music{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .banner{ width: 200px; height: 200px; border-radius:100px; } .music-img{ width: 60px; height: 60px; position: absolute; top: 70px; z-index: 10; } .rotate{ animation: rotate 12s infinite; } @keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } } ```