安卓手机上html5页面播放音乐为何只能播放一次?
在安卓手机上,打开一个播放音乐的页面,点击播放,第一次点击的时候能够播放,播放完以后再次点击播放却无法播放了,这是什么原因导致的,有什么方法可以解决?
另外同样的页面在ios下面没有问题。
测试用例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音乐播放器</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
</head>
<body>
<audio id="music" src="http://wtser.u.qiniudn.com/download-complete.wav" preload="auto"></audio>
<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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
好像是浏览器兼容性的问题。用js 创建audio对象的形式成功实现了点击再次播放。
//onclick do after
检测ended属性,根据currenttime还有durration,等它播放完之后又重新播放