javascript - 音乐audio 的 play() 方法无效 怎么补救。
本文介绍了javascript - 音乐audio 的 play() 方法无效 怎么补救。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<body>
<div>
<audio controls="true" autoplay="true" id="audio">
<source src="http://i.dxlfile.com/app/music/27.mp3" />
<!-- <source src="http://i.dxlfile.com/app/music/27.ogg" /> -->
<!-- <source src="http://i.dxlfile.com/app/music/27.ogg" /> -->
</audio>
</div>
<script>
var audio=document.getElementById("audio");
audio.addEventListener("canplay", function() {
console.log("canplay");
audio.play();
console.log(1111);
});
console.log(audio.canPlayType("audio/mp3"));
console.log(audio.readyState);
if (audio.readyState==0) {
console.log("readyState");
audio.play();
}
</script>
</body>
然而 手机上的 音乐状态一直 都是 不自动播放 ， 必须手动点击一下才能播放
解决方案
部分移动设备（IOS）浏览器有限制，需要被动（手动触摸）触发才能播放，亲测我的（Meizu）浏览器可以自动播放，（OPPO R9S）自带浏览器失败，微信内置浏览器是可以的，其它OPPO系列应该差不多，国产就是这样，都模仿，弄的我不得不吐槽了，搞的移动端和当初IE一个样儿了，真的是！
更新：
<div>
<audio controls="true" id="audio">
<source src="http://i.dxlfile.com/app/music/27.mp3" />
<!-- <source src="http://i.dxlfile.com/app/music/27.ogg" /> -->
<!-- <source src="http://i.dxlfile.com/app/music/27.ogg" /> -->
</audio>
<a href="javascript:;" id="fakeClick"></a>
</div>
<script>
var audio = document.getElementById("audio");
var aEle = document.getElementById("fakeClick");
aEle.addEventListener('click', function(e) {
e.preventDefault();
audio.play();
})
function fakeClick(fn) {
var evt;
if (document.createEvent) {
evt = document.createEvent("MouseEvents");
if (evt.initMouseEvent) {
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
aEle.dispatchEvent(evt);
}
}
}
audio.addEventListener("canplay", fakeClick);
</script>测试了一下模拟点击触发也不成功，最后无奈去apple开发者中心找了一下，发现了答案。
直接搬迁过来的原话：
User Control of Downloads Over Cellular Networks
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
This plays the movie: <input type="button" value="Play" onclick="document.myMovie.play()">
This does nothing on iOS: <body onload="document.myMovie.play()">用我学了长达12年的英语翻译一下就是不可以啦，需要用户主动去触发才得行啦。好了，我能做的就是这么多了，其实我还手动测试了一下其他hack方法，最后也以失败告终，直接解决办法就是绑定一个触摸事件给最上层容器上，用户肯定要触摸滚动之类的啊，这样不得不就触发了。
这篇关于javascript - 音乐audio 的 play() 方法无效 怎么补救。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
