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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM