javascript - HTML 标签的 canplaythrough 不会在移动设备上触发

Question

我正在使用 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) 上:

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

Answer 1

在桌面上:

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

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

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

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