播放音乐 javascript答案

【问题标题】：play music javascript播放音乐 javascript
【发布时间】：2014-10-01 02:33:36
【问题描述】：

我的代码如下。基本上，我的目标是一旦用户单击某个按钮，我将获取此按钮的 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();
  });

});

【问题讨论】：

您使用的是 HTML 音频还是插件？
我只是在使用 HTML

标签： javascript php ajax audio

【解决方案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 元素。

【讨论】：

【解决方案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();
});

尚未测试，希望可以。

【讨论】：