需求：通過(guò)點(diǎn)擊微信公眾號(hào)中的按鈕，跳轉(zhuǎn)到一個(gè)活動(dòng)網(wǎng)頁(yè)蚤假，網(wǎng)頁(yè)自動(dòng)開(kāi)始循環(huán)播放背景音樂(lè)栏饮。
環(huán)境：uni-app開(kāi)發(fā)，適配iOS&andriod原生app及微信公眾號(hào)網(wǎng)頁(yè)磷仰。
開(kāi)發(fā)流程：
- 加載背景音樂(lè)播放地址
- 調(diào)用播放
上代碼：
<script>
export default {
data: function() {
return {
music: null, // 背景音樂(lè)路徑
audioplayer: uni.createInnerAudioContext(), // 播放器上下文innerAudioContext
isplaying: false // 標(biāo)記播放狀態(tài)伺通，用來(lái)啟動(dòng)&暫停播放動(dòng)畫(huà)
}
},
onLoad({id}) {
// 處理音頻播放上下文參數(shù)
this.audioplayer.autoplay = true
this.audioplayer.loop = true
this.audioplayer.onPlay(()=>{
this.isplaying = true
})
this.audioplayer.onPause(()=>{
this.isplaying = false
})
// 由于我們的活動(dòng)是自由選擇背景音樂(lè)，所以需要根據(jù)id獲取背景音樂(lè)地址
this.loadMusic(id).then(music=>{
// 播放音樂(lè)逢享，如果為app罐监，直接調(diào)用播放即可
// #ifdef APP-PLUS
this.playMusic(music)
// #endif
// #ifdef H5
// 公眾號(hào)開(kāi)發(fā)，注入微信權(quán)限瞒爬，或調(diào)用分享接口(此處內(nèi)容請(qǐng)自行封裝)
/*
wx.config({
debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)
appId: appid, // 必填弓柱，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: noncestr, // 必填侧但，生成簽名的隨機(jī)串
signature: sign, // 必填矢空，簽名
jsApiList:['updateAppMessageShareData','updateTimelineShareData'] // 必填，需要使用的JS接口列表禀横，開(kāi)發(fā)文檔上有所有接口名稱屁药，根據(jù)需要自行選用。
});
wx.ready(function() {
this.playMusic(music)
});
*/
// 由于我們使用uni-app開(kāi)發(fā)柏锄，統(tǒng)一在入口app.vue中轉(zhuǎn)接到入口頁(yè)面酿箭，在入口頁(yè)面注入權(quán)限，已執(zhí)行wx.ready()趾娃，重復(fù)注入不符合設(shè)計(jì)規(guī)范缭嫡。
// 所以，我們?cè)诖隧?yè)面中抬闷，調(diào)用了分享設(shè)置接口妇蛀，在完成設(shè)置后執(zhí)行播放。
// 以下兩種方式都可以播放饶氏。
wx.updateAppMessageShareData({
title: title,
desc: desc,
link:link,
imgUrl: imgUrl,
success: ()=>{
this.playMusic(music)
}
})
wx.updateTimelineShareData({
title: title,
desc: desc,
link:link,
imgUrl: imgUrl,
success: ()=>{
this.playMusic(music)
}
})
// #endif
})
},
methods: {
playMusic(music) {
// 由于部分活動(dòng)不需要配置背景音樂(lè)讥耗，music有可能為空
if (music) {
this.audioplayer.src = music
this.audioplayer.play()
}else {
this.audioplayer.destory()
this.audioplayer = null
}
},
loadMusic(id) {
// 此處執(zhí)行網(wǎng)絡(luò)請(qǐng)求后返回music
let music;
return new Promise(function(resolve, reject) {
...
resolve(music)
})
}
}
}
</script>
