安卓苹果网页访问自动播放音乐的代码

代码如下 将其修改为自动播放 顺带去掉播放按钮键 并且循环播放
<!DOCTYPE html>
<html>
<head>

<title>音乐播放器</title>

</head>
<body>

<button id="bf" onclick="play()">播放</button>
<button id="zt" onclick="pause()">暂停</button>

<script> audio = document.getElementById("music"); document.getElementById("zt").style.display = "none"; audio.addEventListener("timeupdate", showtime, true); function showtime() { if (audio.duration == audio.currentTime) { document.getElementById("zt").style.display = "none"; document.getElementById("bf").style.display = ""; document.getElementById("music").currentTime = 0; } } function play() { audio.play(); document.getElementById("zt").style.display = ""; document.getElementById("bf").style.display = "none"; } function pause() { audio.pause(); document.getElementById("bf").style.display = ""; document.getElementById("zt").style.display = "none"; //document.getElementById("music").currentTime =0; } </script>

</body>
</html>

阅读 7.4k
2 个回答

直接在H5中使用audio标签,里面就自动播放的属性。

新手上路,请多包涵

因为一些安全限制,移动端上面的音频无法像在PC上一样执行自动播放代码。

解决方法是给移动端增加一个交互(触屏)事件。

audio.addEventListener("canplaythrough", function({

  //音频可流畅播放时,播放;PC上可以,移动端不行。
  audio.play();
  document.addEventListener('touchstart',function(){

    //增加一个touchstart交互事件,触屏后播放音乐
    audio.play();
    //播放音频后移除touchstart事件的当前匿名函数
     document.removeEventListener('touchstart',arguments.callee,false);}, false);

});

这样移动端就和PC表现一致。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题