前置:以下问题是针对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;
})
},