在安卓手机上,打开一个播放音乐的页面,点击播放,第一次点击的时候能够播放,播放完以后再次点击播放却无法播放了,这是什么原因导致的,有什么方法可以解决?
另外同样的页面在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>
解决方案
好像是浏览器兼容性的问题。用js 创建audio对象的形式成功实现了点击再次播放。
//onclick do after
myAudio = new Audio('someSound.ogg'); myAudio.addEventListener('ended', function() { this.currentTime = 0; /*this.play();*/}, false);myAudio.play();