[TOC]
# 用組件寫音樂播放器
## wxml
```
<image src="{{isPlay?play:pause}}" class="m-play" bind:tap="onMusic"></image>
```
## js
```
const audio = wx.getBackgroundAudioManager();
Component({
/**
* 組件的屬性列表
*/
properties: {
image:String,
content:String,
url:String,
title:String
},
/**
* 組件的初始數據
*/
data: {
isPlay:false,
play:"images/play.png",
pause:"images/pause.png"
},
/**
* 組件的方法列表
*/
methods: {
onMusic(){
if(this.data.isPlay){
audio.pause();
this.setData({
isPlay:false
})
}else{
audio.title = this.properties.title;
audio.src=this.properties.url;
this.setData({
isPlay:true
})
}
},
_recoveryMusic(){
if(audio.src==this.properties.url){
this.setData({
isPlay:true
})
}
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(){
this._recoveryMusic();
this._monitorMusic();
}
})
```
