HTML <audio> 标签的 canplaythrough 无法在移动设备上触发

Posted 2023-02-25

【中文标题】HTML <audio> 标签的 canplaythrough 无法在移动设备上触发

【英文标题】：HTML <audio> tag's canplaythrough not firing on mobile

【发布时间】：2016-03-01 02:32:30

【问题描述】：

我正在使用 html 5 <audio> 标签。我觉得它很酷，但只是遇到了一个非常奇怪的情况。简而言之，canplaythrough 不会像预期的那样在移动设备上触发。

在这种情况下，我在网页上有几个按钮：

<button id="sndbtn01" onclick="createAudioById('01')">Audio 01</button>
<button id="sndbtn02" onclick="createAudioById('02')">Audio 02</button>
<button id="sndbtn03" onclick="createAudioById('03')">Audio 03</button>
<button id="sndbtn04" onclick="createAudioById('04')">Audio 04</button>

我希望在单击“Audio 01”时播放 01.mp3，以及单击“Audio 02”、“Audio 03”、“Audio 04”按钮的类似动作。而且我希望在点击按钮的时候创建<audio>标签，这样我就可以在不预加载所有内容的情况下节省流量。

所以，我有 javascript 代码：

  var audioObj = ;
  function createAudioById(id)
    var p = audioObj[id];
    // alert(1)
    if (p != undefined) 
      alert(2);
      p.play();
      return;
     else 
      alert(3);
      p = new Audio();
      p.addEventListener('canplaythrough', function(e)
        e.currentTarget.removeEventListener('canplaythrough', arguments.callee);
        alert(4);
        p.play();
      );
      p.src = '../snds/'+id+'.mp3';
      audioObj[id] = p;
    
  

但这种行为在移动设备上很奇怪：

在手机 (iPhone) 上：

首先单击button 01 会触发(3)，然后什么也没有发生 - canplaythrough 事件从未被触发并且音频从未播放过 - 与预期不同：(4) 应该被触发并且音频应该被播放; 如果我再次单击该按钮，(2) 将触发并播放音频。但奇怪的是，音频开始播放几秒钟后，(4) 就被触发了。 如果我在播放音频时单击按钮，(2) 会被触发并且没有任何反应，音频会继续播放 - 正如预期的那样； 如果我在音频播放完毕时点击按钮，(2) 将被触发，音频已播放，(4) 永远不会弹出 - 正如预期的那样。

【参考方案1】：

在桌面上：

我不明白为什么这是奇怪的行为。您首先检查名称为“01”的音频是否存在。它没有，所以你创建它，当它完成加载并可以播放时，事件监听器被触发并开始播放。

然后，您在播放时再次按下该按钮。您检查名称为“01”的音频是否存在 - 它确实存在，因为您之前创建了它并且它仍在播放。因此，定义了 p 并且 (2) 触发。音频一直在播放，因为您告诉它播放，它已经在播放了。

然后，当音频停止并按下按钮时，您检查名称为“01”的音频是否存在。它仍然存在——它停止播放了，但它仍然存在，只是因为歌曲结束而暂停了。所以（2）触发器，你告诉它播放，但事件监听器仍在监听，你从未破坏它，所以当它重新下载歌曲时，canplaythrough 被第二次触发。这都是正常的行为。

在移动设备上： 你有完全相同的设置，除了这一次无论出于何种原因 canplaythrough 事件没有触发。我不知道为什么会这样，但这是另一个问题。除此之外，这种行为很容易解释。您创建了新的音频，由于某种原因该事件没有被触发，所以当您再次单击该按钮时，音频仍然存在，从您之前创建它时开始播放并开始播放。然后，当歌曲结束时，音频仍然存在并且仍然有事件侦听器，但是再一次，由于某种原因，事件侦听器根本不起作用，但音频仍然会播放，因为它仍然存在。

【讨论】：

感谢回复，我又试了一次，发现canplaythrough每次调用audioelement.play()都会触发； - 这有点奇怪。无论如何，在这种情况下如何删除事件监听器？您是否知道为什么该事件没有在移动设备上触发？

我不知道为什么不能在移动设备上触发 canplaythrough，但是要删除事件侦听器，只需在事件侦听器触发的函数中添加 e.currentTarget.removeEventListener('canplaythrough')在第一次触发事件侦听器时摆脱它。确保将参数 e 添加到函数开头，如 function handler(e)

谢谢，我已经更新了问题，但是在添加 e.currentTarget.removeEventListener('canplaythrough') 之后，(4) 仍在触发 - 您可以看到我最新代码的已编辑问题。

为了让 e.currentTarget.removeEventListener 工作，函数需要有一个名字，它不能是匿名的。使用函数处理程序（e）

我忘记传递参考了。我只是通过使用e.currentTarget.removeEventListener('canplaythrough', arguments.callee);来解决它，谢谢！