问题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()
})