首頁(yè)
<button type="default" class="music" @click="playVoice(lastRecord,isPlay)">
<image src="../../static/music.png" mode=""></image>
</button>
data() {
return {
isPlay: false
}
},
onLoad() {
this.innerAudioContext = uni.createInnerAudioContext();
this.playVoice('music.mp3')
uni.$on('changePlay', isPlay => {
this.playVoice(this.lastRecord, this.isPlay)
})
},
methods: {
playVoice(url, isPlay) { // url即為音頻路徑
if (url) {
this.lastRecord = url; // 將路徑賦值給定義的變量好做判斷
this.innerAudioContext.src = url; // 配置音頻播放路徑
this.innerAudioContext.play(); // 播放
this.innerAudioContext.loop = true; // 是否循環(huán)播放
}
this.isPlay = !this.isPlay;
if (isPlay) {
this.innerAudioContext.pause(); // 停止
}
}
}
其他頁(yè)面也想控制這個(gè)音樂按鈕
我看app.vue不支持寫template ，所以就每個(gè)頁(yè)面都寫了一下這個(gè)按鈕嘴办，然后通過emit漾稀，on來傳遞數(shù)據(jù)
<button type="default" class="music" @click="playVoice()">
<image src="../../static/music.png" mode=""></image>
</button>
playVoice() {
uni.$emit('changePlay', 1);
},
沒去寫看公共的方法派近，就醬吧，我累了...
