Javascript 在mobile Chrome中启动HTML5音频播放可以接受哪些事件
移动浏览器需要用户操作才能开始播放音频元素。点击事件满足要求，但在Android或iOS上的Chrome中，touchstart似乎不是一个可接受的启动事件。（见下文） 有人知道在哪里找到启动播放所需的事件上下文的精确定义吗 （我试图使用中的想法解决用户体验问题。自从发布我的原始问题以来，我找到了一个解决用户体验问题的解决方案，而无需使用touchstart，但我认为关于哪些事件被视为用户行为的基本问题仍然有效。） 增编： 有人建议我对touchstart事件的理解是错误的，因此为了记录在案，我提供了一个简单的测试程序。因为它需要一个真正的音乐文件和一个移动设备，所以JSFIDLE不是一个合适的平台（除非有人知道如何用小提琴模拟touchstart事件）。要重现我的观察结果，请编辑javascript以加载您自己的音频文件Javascript 在mobile Chrome中启动HTML5音频播放可以接受哪些事件,javascript,android,ios,html,audio,Javascript,Android,Ios,Html,Audio,移动浏览器需要用户操作才能开始播放音频元素。点击事件满足要求，但在Android或iOS上的Chrome中，touchstart似乎不是一个可接受的启动事件。（见下文） 有人知道在哪里找到启动播放所需的事件上下文的精确定义吗 （我试图使用中的想法解决用户体验问题。自从发布我的原始问题以来，我找到了一个解决用户体验问题的解决方案，而无需使用touchstart，但我认为关于哪些事件被视为用户行为的基本问题仍然有效。） 增编： 有人建议我对touchstart事件的理解是错误的，因此为了记录在案，我
<!DOCTYPE html>
<html>
<body>
<br>
<button type="button" id="but1">click</button>
<button type="button" id="but2">touch</button>
<br>
<br>
<span id="message"></span>
<script>
var e;
e = document.getElementById('but1');
e.onclick = click;
e = document.getElementById('but2');
e.ontouchstart = touchstart;
function click() {
alert('caught click');
play();
event.preventDefault();
}
function touchstart() {
alert('caught touchstart');
play();
event.preventDefault();
}
var p;
var t;
function play() {
p = new Audio();
p.src = '/k487.mp3'; // CHANGE THIS
p.preload = 'auto';
p.play();
t = setInterval(report,1000);
}
function report() {
var s = 'Player readyState='+p.readyState+', currentTime='+p.currentTime;
var e = document.getElementById('message');
e.innerHTML = s;
}
</script>
</body>
</html>
点击
触摸
变量e；
e=document.getElementById（'but1'）；
e、 onclick=单击；
e=document.getElementById（'but2'）；
e、 ontouchstart=touchstart；
函数单击（）{
警报（“捕捉到咔哒声”）；
play（）；
event.preventDefault（）；
}
函数touchstart（）{
警报（“捕获的touchstart”）；
play（）；
event.preventDefault（）；
}
var-p；
变量t；
函数播放（）{
p=新音频（）；
p、 src='/k487.mp3'；//更改此值
p、 预加载='自动'；
p、 play（）；
t=设定间隔（报告，1000）；
}
功能报告（）{
var s='Player readyState='+p.readyState+'，currentTime='+p.currentTime；
var e=document.getElementById（'message'）；
e、 innerHTML=s；
}
因为我找不到关于什么事件是要工作的文档，我不知道是否考虑这是一个Chrome bug，或者是故意的行为。
在此你会找到这个问题的答案。< /P> 使用一些弹出窗口或任何动画片吸引用户点击 在我的记忆中。。。android和iOS并没有相同的行为——我们可以用这个技巧启动缓冲区的最大音频数 var EXE_JUST_ONE_TIME = false;
document.addEventListener("touchstart" , function(e) {
if (EXE_JUST_ONE_TIME == false){
EXE_JUST_ONE_TIME = true;
document.getElementById("LaserShot").play(); // need for play pause just for buffering start
document.getElementById("LaserShot").pause();
// now you can play programmability from js
document.getElementById("LaserShot_CLONE").play();
document.getElementById("LaserShot_CLONE").pause();
}
else if(EXE_JUST_ONE_TIME = true){
document.getElementById("MakeReadyotherAudio1").play();
document.getElementById("MakeReadyotherAudio1").pause();
EXE_JUST_ONE_TIME = 'NOMORE'
}
}
document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});
window.addEventListener('touchstart', function(e){
e.preventDefault()
}, false)
window.addEventListener('touchmove', function(e){
e.preventDefault()
}, false)
window.addEventListener('touchend', function(e){
e.preventDefault()
}, false)
window.addEventListener('touchleave', function(e){
e.preventDefault()
}, false)
window.addEventListener('touchcancel', function(e){
e.preventDefault()
}, false)
window.addEventListener('touchenter', function(e){
e.preventDefault()
}, false)
- 改变
- 点击
- 上下文菜单
- dblclick
- 鼠标
- 指针
- 重置
- 提交
- 接触端
希望这对您有所帮助。是的，我做了，但我正在为此使用javascript框架（CreateJS）。他们在这里完美地解释了这个问题：。也许你应该阅读它，它可能会给你一些关于如何修复它的提示。据我所知，你的参考资料只提供了标准的onclick解决方案。问题是是否有其他事件可以启动play-touchstart不起作用。我认为你是对的。Touchstart将无法工作。我读过一些文章，其中有人将此应用于touchend，但touchend并不是最好的选择，因为它永远不会启动（例如，当您的手指在touchstart事件中稍微移动时）。我认为使用“点击”事件是唯一稳定的选择。这似乎回答了一个不同的问题。您似乎承认启动播放机需要首次单击某些内容。“touchstart不是可接受的启动事件”这不是真的。看看可能的错误轨迹：我总是只使用手机触摸事件。我已经在原始问题中添加了我的证据。这个列表似乎更符合理论。在mobile chrome上，touchend事件还引发了一个异常，即不允许播放媒体。