Javascript HTML<；音频>；标签'；不在手机上开火可以玩得很开心

我正在玩HTML5

标签。我觉得很酷，但只是遇到了一个非常奇怪的情况。简而言之，

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>

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

在手机（iPhone）上：

首先点击

按钮01

触发

（3）

，然后什么也没有发生-从未触发

canplaythrough

事件，也从未播放过音频-这与预期不符：应触发

（4）

，并播放音频

如果我再次单击按钮，将触发

（2）

，并播放音频。但奇怪的是，

（4）

在音频开始播放几秒钟后被触发

如果我在播放音频时单击按钮，则会触发

（2）

，并且不会发生任何事情，音频会继续播放-如预期的那样

如果在音频播放完成时单击按钮，将触发

（2）

，播放音频，并且

（4）

不会弹出-如预期的那样

在桌面上：

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

然后，在播放时再次按下按钮。您可以检查名为“01”的音频是否存在-确实存在，因为您以前创建了它，并且它仍在播放。因此，定义了p，并触发（2）。音频一直在播放，因为你让它播放，它已经在播放了

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

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

在桌面上：

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

然后，在播放时再次按下按钮。您可以检查名为“01”的音频是否存在-确实存在，因为您以前创建了它，并且它仍在播放。因此，定义了p，并触发（2）。音频一直在播放，因为你让它播放，它已经在播放了

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

在手机上：

---

您有完全相同的设置，除了这次由于任何原因不能触发canplaythrough事件。我不知道为什么，但那是另一个问题。除此之外，这种行为很容易解释。创建新音频时，由于某些原因，事件不会触发，因此当再次单击按钮时，音频仍然存在，从您之前创建音频时开始播放。然后，当歌曲结束时，音频仍然存在，并且仍然有事件监听器，但是由于某种原因，事件监听器根本不工作，但是音频仍然可以播放，因为它仍然存在。

感谢您的回复，我再次尝试，发现每次调用audioelement.play（）；-这有点奇怪。无论如何，在这种情况下，如何删除事件侦听器？你有什么线索可以解释为什么手机上没有触发事件？我不知道为什么手机上没有触发canplaythrough，但是要删除事件侦听器，只需添加e.currentTarget.removeEventListener（'canplaythrough'））在函数内部，事件侦听器触发该函数，以在事件侦听器第一次被触发时将其清除。确保像函数处理程序（e）一样将参数e添加到函数开头{谢谢，我已经更新了问题，但是在添加了

e.currentTarget.removeEventListener（'canplaythrough'）

之后，

（4）

仍在启动-您可以看到我最新代码的编辑问题。为了使e.currentTarget.removeEventListener正常工作，函数需要有一个名称，它不能是匿名的。请使用函数处理程序（e）{我忘了传递引用。我只是使用

e.currentTarget.removeEventListener来解决它（'canplaythrough'，arguments.callee）；

谢谢！谢谢你的回复，我再次尝试，发现

canplaythrough

每次调用audioelement.play（）都会触发这有点奇怪。无论如何，在这种情况下，我如何删除事件侦听器？您是否有任何线索可以解释为什么事件没有在手机上启动？我不知道为什么canplaythrough没有启动

  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;
    }
  }