前置:以下問題是針對vue項目的解決方案
問題一:IOS中音頻不能自動播放
原因:ios禁止了音頻自動播放
解決辦法:在vue的生命周期mounted中獲取音頻Dom並調用音頻播放方法play(),注意:需要確保Dom渲染完畢后再獲取音頻dom,代碼如下
//音頻Dom <audio :src="audioWing" ref="wing"></audio>
//js部分
mounted(){ let that = this that.$nextTick(function(){ that.wingAudio = that.$refs.wing that.wingAudio.play() }) },
問題二:Android APP中h5音頻不能播放
問題描述:點擊請求接口同時播放audio1,數據返回處理后后調用方法播放audio2,但是audio2無法播放
原因:如果你知道請給我留言
解決辦法:在vue的生命周期mounted中獲取所有音頻Dom並調用音頻播放方法play(),因為剛進入頁面比不需要播放,所以再立即執行暫停 pause() 和音頻還原方法,注意:需要確保Dom渲染完畢后再獲取音頻Dom。代碼如下:
<audio :src="audioWing" ref="wing"></audio> <audio :src="audioFail" ref="fail"></audio> <audio :src="audioCoin" ref="coin"></audio>
mounted(){ let that = this that.$nextTick(function(){ // 獲取音頻dome,並且執行一次 that.failAudio = that.$refs.fail that.coinAudio = that.$refs.coin that.wingAudio = that.$refs.wing that.failAudio.play() that.wingAudio.play() that.failAudio.pause(); that.failAudio.currentTime = 0; that.wingAudio.pause(); that.wingAudio.currentTime = 0; }) },