App中h5音頻不能播放問題

前置：如下問題是針對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;
        })
    },