播放音樂javascript

Question

我的代碼如下。 基本上，我的目標是一旦用戶單擊某個按鈕，我將獲得此按鈕的ID並通過ajax發送，然后根據指定的ID返回mp3網址並播放聲音。 一切運行正常，但問題是我不知道如何停止或暫停音樂。 我已經嘗試過audio.stop()或audio.pause() 。 沒有人在工作。

用戶單擊某個按鈕后，我想停止所有音樂並播放被單擊的新音樂。

$('.play_sound').click(function(event){
event.preventDefault();
var data_id = $(this).parents('tr').attr('data-id');

  $.post('ajax/play_sound.php', {data_id: data_id}, function(data){
     var audio = new Audio(data);
     audio.play();
  });

});

Answer 1

由於您是在匿名函數范圍內將audio作為局部變量創建的，因此無法暫停它。

最簡單的解決方案是使audio全球化。

如果您計划支持多個音頻對象，則更好的方法是創建一個像AudioPool這樣的對象，並且您還可以添加“結束”之類的事件。

var audio;

$('.pause_sound').click(function(event){
  event.preventDefault();
  if (!audio.paused) {
    audio.pause();
  }
});


$('.stop_sound').click(function(event){
  event.preventDefault();
  audio.stop();
});

$('.play_sound').click(function(event){
event.preventDefault();
var data_id = $(this).parents('tr').attr('data-id');

  $.post('ajax/play_sound.php', {data_id: data_id}, function(data){
     // audio of global scope
     audio = new Audio(data);
     audio.play();
  });

});

carlodurso建議使用另一種解決方案來查詢DOM並為audio創建HTML元素。

Answer 2

您應該創建一個音頻標簽

<audio src="audio.mp3" id="audio"></audio>

然后

document.getElementById('audio').pause();

$.post('ajax/play_sound.php', {data_id: data_id}, function(data){
    document.getElementById('audio').src = data;
    document.getElementById('audio').play();
});

---

還沒有測試，希望它能正常工作。