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这样的对象，您还可以添加＆＃34;结束＆＃34;等事件。

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

Haven未经过测试，希望能够开始。

播放音乐javascript

2 个答案: