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

 

转载于:https://www.cnblogs.com/weichen913/p/9378743.html