Question

所以我有一个div，它在点击时播放mp3声音。而不是玩一次。它继续一遍又一遍地播放。代码片段是：

  $(".g-contain").click(function() {
       audioElement.play();
    });

这可能无关紧要，但我想我应该向您展示整体代码：

      /* set no cache */
      $.ajaxSetup({ cache: false });


          var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'https://www.dropbox.com/s/k8xaglyd48vbnq1/pacman_chomp.mp3?dl=1');

        audioElement.addEventListener('ended', function() {
            this.play();
        }, false);


      $.getJSON("scripts/data", function(data) {
        var html = [];

        /* loop through array */
        $.each(data, function(index, g) {

        $(".container").append(
            "<div class='g-details'><div class='name'>" +
              g.name + "</div>);

 // And finally my click call is here

 $(".g-contain").click(function() {
      audioElement.play();
 });

在点击g-contain div时，不确定mp3文件为何继续播放

Answer 1

这是由于这段代码：

audioElement.addEventListener('ended', function() {
        this.play();
}, false);

当播放为play时，您将一个事件监听器附加到音频元素以重新ended。所以一旦它被播放（点击），它将无限播放。

来自MDN ended event Reference：

<强>结束

播放或流式播放停止时会触发已结束的事件   因为已达到媒体的结尾或因为没有其他数据   可用。

摆脱这段代码。

如何使用JQuery只播放一次音频声音？

1 个答案: