为什么audio对象在延时1000毫秒之后就不能执行播放呢?
歌曲的路径需要从数据库中获取,所以需要用ajax来交互,但是发现假如时间过长即使获取到路径也不能执行播放。
为方便测试使用setTimeout来模拟
<!doctype html>
<html>
<head>
<title>自动播放音乐测试</title>
<meta charset="utf-8">
</head>
<body>
试试看能不能听到声音。
</body>
</html>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
(function () {
var a = new Audio();
a.src = 'http://fztj.qz178.com/html/qz-yyxs/tjyy/42j-hj.mp3';
$(document).click(function(){
setTimeout(function(){
a.play();
}, 1000);
})
})();
</script>
以上代码在1000毫秒后可以正常播放,但如果超过1000毫秒就不能正常播放了,如下:
<!doctype html>
<html>
<head>
<title>自动播放音乐测试</title>
<meta charset="utf-8">
</head>
<body>
试试看能不能听到声音。
</body>
</html>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
(function () {
var a = new Audio();
a.src = 'http://fztj.qz178.com/html/qz-yyxs/tjyy/42j-hj.mp3';
$(document).click(function(){
setTimeout(function(){
a.play();
}, 1001);
})
})();
</script>
求各位解惑!
首先要了解, 在移动端播放音频视频必须是经过用户的操作才能执行的, 然后下面正式解决问题
引用外国友人(andreybavt)的原话:
大概意思就是
如果异步操作1000毫秒内没有收到任何信息, 就会抛出异常(如下), 浏览器就不会把这个操作认为是来自用户的操作, 所以导致无法播放
, 但有趣的是只要你的音频播放完一次后刚刚所说的1000毫秒规则
就不会重复生效, 所以现在我的解决办法是在用户第一次点击播放的时候先播放一次没有声音且接近0秒的音频(当然你也可以播个几十秒=.=)
, 然后就可以愉快的异步了.详细文章可以参考: 原文传送门