在移动 Chrome 中启动 HTML5 音频播放可接受哪些事件答案

【问题标题】：Which events are acceptable for starting HTML5 audio play in mobile Chrome在移动 Chrome 中启动 HTML5 音频播放可接受哪些事件
【发布时间】：2017-06-16 17:40:17
【问题描述】：

移动浏览器需要用户操作才能开始播放音频元素。 click 事件满足要求，但在 Android 或 iOS 上的 Chrome 中，touchstart 似乎不是可接受的启动事件。（见下文）

有谁知道在哪里可以找到开始播放所需的事件上下文的精确定义。

（我试图使用 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 错误或预期行为。

【问题讨论】：

是的，我这样做了，但我为此使用了 javascript 框架 (CreateJS)。他们在这里完美地解释了这个问题：createjs.com/tutorials/Mobile%20Safe%20Approach。也许你应该阅读它，它可能会给你一些关于如何修复它的提示。
据我所知，您的参考仅提供标准的 onclick 解决方案。问题是是否有任何其他事件可以开始播放 - touchstart 不起作用。
我认为你是对的。 Touchstart 将不起作用。我读过有人在 touchend 上使用此功能的文章，但 touchend 并不是真正的最佳选择，因为它永远不会触发（例如，当您的手指在 touchstart 事件中移动一点时）。我认为使用“点击”事件的唯一稳定选项。

标签： javascript android ios html audio

【解决方案1】：

当调用媒体元素上的 play() 方法时，用户代理必须运行以下步骤https://html.spec.whatwg.org/multipage/media.html#dom-media-play

step1：如果媒体元素不允许播放...

那我想知道允许播放的条件，跳到这里https://html.spec.whatwg.org/multipage/media.html#allowed-to-play

上面写着：

例如，用户代理可能要求播放由用户激活触发，但可能会出现异常以允许在静音时播放

然后来到“用户激活触发”here 我想这就是原因：

如果满足以下任一条件，则由用户激活触发算法：

运行算法的任务当前正在处理点击事件的 isTrusted 属性为 true 的激活行为。

改变

点击

上下文菜单

dblclick

鼠标移动

指针

重置

提交

触摸结束

那里没有提到'touchstart'。

希望对你有所帮助。

【讨论】：

似乎这个列表更理论化。在移动 chrome 上，touchend 事件也会抛出不允许媒体播放的异常。

【解决方案2】：

在这个page你会找到这个问题的答案。

使用一些弹出窗口或任何好看的动画来吸引用户点击。

在我的记忆中...... 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'

  } 


    }

如果您有问题，我可以让您使用工作示例编写 sn-p 代码！

我在开始时的事件功能中投入了 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 optimise for canvas

【讨论】：

这似乎是在回答一个不同的问题。您似乎承认启动播放器需要初始单击。
“touchstart 不是一个可接受的启动事件”这不是真的。看看可能是错误跟踪：stackoverflow.com/questions/2794769/… 我一直只用于移动设备的触摸事件。
我已将我的证据添加到原始问题中。