如何使用JQuery僅播放一次音頻聲音？

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

不知道爲什麼MP3文件保存時g-contain格被點擊

打

Answer 1

這是由於此代碼：

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

你附加的事件裏當播放爲ended時，轉到音頻元素以重新編號爲play。所以一旦播放（點擊）它將無限播放。

從MDN ended event Reference：

結束

當播放或流已停止 因爲媒體的年底達到或因爲沒有進一步的數據是 可用端事件。

只是擺脫這段代碼。