javascript - 播放音乐

Question

我的代码如下。基本上，我的目标是一旦用户单击某个按钮，我将获取该按钮的 id 并通过 ajax 发送它，然后根据指定的 id 返回 mp3 url 并播放声音。一切都工作得很好，但问题是我不知道如何停止或暂停音乐。我尝试过 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 这样的对象，并且您还可以添加“end”之类的事件。

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 元素。