微信小程序播放音頻,ios靜音狀態下無聲音、音頻播放創建多個等問題

對於野生程序員的我來講,每次弄出一個東西,都會記錄分享一下,需求不一致,所以使用的音頻播放方式不一樣,記錄一下用js進行播放音頻的方法:

首先需要全局設置ios靜音模式下播放聲音,當然此方法也可以設置其他參數,[微信開發文檔地址]
(https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.setInnerAudioOption.html)
注意:千萬不要用innerAudioContext.obeyMuteSwitch = false;,2.3.0 版本開始此參數不生效

注意:千萬不要用innerAudioContext.obeyMuteSwitch = false;,2.3.0 版本開始此參數不生效

注意:千萬不要用innerAudioContext.obeyMuteSwitch = false;,2.3.0 版本開始此參數不生效

在app.js中

onLaunch() {
   
   
   wx.setInnerAudioOption({
   
   
      obeyMuteSwitch: false,
    })
}

在page.js中,爲防止創建多個音頻播放,我這裏採用全局創建的方式,通過停止、更換播放地址、播放等進行重新播放api地址

const innerAudioContext = wx.createInnerAudioContext() //創建全局音頻管理器
//在頁面顯示的時候寫入對音頻的播放進行監聽
onShow(){
   
   
   //監聽播報的事件
    innerAudioContext.onPlay(() => {
   
   
      console.log('開始播放');
    })
    //監聽播報出錯的事件
    innerAudioContext.onError(() => {
   
   
      console.log("監聽音頻播放出錯事件")
    })
    innerAudioContext.onEnded(() => {
   
   
      console.log("監聽播放結束事件")  
      //這裏可以寫入一些播放結束後的邏輯
    })
}

//請求接口獲得播放音頻地址
quest:function(){
   
   
 wx.request({
   
   
   url: 'test.php', //僅爲示例,並非真實的接口地址
   method:"POST",
   data: {
   
   
     x: '',//請求參數,僅爲示例
   },
   header: {
   
   
     'content-type': 'application/json' // 默認值
   },
   success (res) {
   
   
    console.log("音頻播放地址是:",res.data.data)
    innerAudioContext.src = res.data.data //設置音頻地址
    innerAudioContext.play(); //播放音頻
   }
 })
    
}

新手出道,各位大佬發現問題隨時指教,感謝!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章