gaw*_*ter 5 html javascript audio android ios
移动浏览器需要用户操作才能开始播放音频元素。在点击事件满足条件，但现在看来，touchstart是无法在Chrome Android或iOS上可接受的始发事件。（见下文）
有谁知道在哪里可以找到开始游戏所需的事件上下文的精确定义。
（我试图使用How to prevent doubletap zoom in iOS and Android 中的想法来解决 UX 问题 。自从发布我的原始问题以来，我找到了一个解决方案，可以在不使用touchstart 的情况下解决 UX 问题，但我认为基本问题关于哪些事件被认为是用户操作仍然有效。）
附录：
有人建议我对touchstart事件有误解，所以为了记录起见，我提供了一个简单的测试程序。由于它需要真实的音乐文件和移动设备，因此 JSFiddle 不是一个合适的平台（除非有人知道如何在小提琴中模拟 touchstart 事件）。要重现我的观察结果，请编辑 javascript 以加载您自己的音频文件。
<!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>
当我在 Android 6.0.1 上的 Chrome 58 中加载此页面时，单击按钮按预期工作，产生一个弹出窗口，播放一些音乐并更新播放时间。
如果我重新加载页面并改为触摸“触摸”按钮，则会出现弹出窗口，但不会播放音乐。状态显示显示 readyState 为 4 和 currentTime 为 0。换句话说，允许touchstart事件加载音频但不能启动播放。
由于我找不到有关哪些事件应该起作用的文档，因此我不知道是否将此视为 Chrome 错误或预期行为。
在此页面中您将找到该问题的答案。
使用一些弹出窗口或任何美观的动画来吸引用户点击。
在我的记忆中...... 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'
}
}
如果您有问题，我可以为您制作带有工作示例的代码片段！
我在开始的事件函数中将 90% 放入移动网络开发中：
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)
如果您愿意，可以使用此库： desktop/mobile event optimization for canvas
| 归档时间： |
|
| 查看次数： |
1529 次 |
| 最近记录： |