IOS下微信6.5.3版本 H5 audio/video播放问题

前端之家收集整理的这篇文章主要介绍了IOS下微信6.5.3版本 H5 audio/video播放问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

需求:用户摇动手机播放audio

问题1:在IOS最新的微信6.5.3上,无法播放,在老版本或者安卓版上可以
原因:这个版本的IOS微信对H5的语音播放貌似做了严格的控制,一定需要有一个用户事件触发播放之后,才允许代码控制语音。而摇动手机的事件,是JS库模拟的一个事件,非用户事件,无法完成语音的播放。
解决方案:发现微信SDK的ready事件在其自带浏览器中被当成了用户事件级别,因此这个事件的处理代码中能够有效播放音频。因此

wx.ready(function () {
  playAudio()
})

这样,之后的shake事件能够播放音频。但是,最好能在ready中静默的播放音频,毕竟这里不是用户在摇动手机。

问题2:IOS中无法对audio进行音量控制,即audio.volume = 0无效。因此这段代码无法完成静默播放:

wx.ready(function () {
  setAudioVolumeAsZero()
  playAudio()
})

解决方案:

wx.ready(function () {
  playAudio()
  pauseAudio()
})

必须先playpause一下,不能够直接play,否则还是无法播放

全部代码

dio src="kaka.mp3" id="kaka">
function playKaka (mute) {
    var kaka = document.getElementById('kaka')
   kaka.play()
   mute && kaka.pause()
}

function initWX () {
wx.config()
wx.ready(function () {
playKaka(true)
})
}

function initShakeEvent () {
var shake = new Shake()
window.addEventListener('shake',function () {
playKaka()
},false)
shake.start()
}

$(function () {
initWX()
initShakeEvent()
})

猜你在找的程序笔记相关文章