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;
        })
    },