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>

我期望在点击“音频01”时播放01.mp3，以及点击“音频02”，“音频03”，“音频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;
    }
  }

但移动设备上的行为很奇怪：

On Mobile（iPhone）：

首先点击button 01会触发(3)，然后什么都不会发生 - canplaythrough事件永远不会被触发且音频从未播放过 - 不像预期的那样：{{1}应该开火和音频;
如果我再次点击按钮，(4)会触发并播放音频。但奇怪的是，(2)在音频开始播放后几秒钟被解雇。
如果我在播放音频时单击按钮，则会触发(4)并且没有任何反应，音频会继续播放 - 正如所料;
如果我在播放音频时点击按钮，(2)会触发，播放音频并且(2)永远不会弹出 - 正如预期的那样。

Answer 1

在桌面上：

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

然后，在播放时再次按下按钮。您检查名称为＆＃39; 01＆＃39;的音频。存在 - 它确实如此，因为你之前创造了它并且它仍然在玩。因此，定义了p，并且（2）触发。音频一直播放，因为你告诉它播放，它已经在播放。

然后，当音频停止并按下按钮时，检查名称为＆＃39; 01＆＃39;的音频。存在。它仍然存在 - 它停止播放，但它仍然存在，它现在只是暂停，因为歌曲已经结束。所以（2）触发并告诉它播放，但是事件监听器仍在监听，你从未将其销毁，所以当它重新下载歌曲时，canplaythrough会被触发第二次。这都是正常行为。

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

HTML <audio>标签无法在移动设备上播放

1 个答案: