播放音樂javascript

我的代碼如下。基本上，我的目標是一旦用戶點擊某個按鈕，我會得到這個按鈕的id並通過ajax發送，然後根據指定的id返回mp3 url並播放聲音。一切工作都很好，但問題是我不知道如何停止或暫停音樂。我試過audio.stop()或audio.pause()。兩人都沒有工作。播放音樂javascript

一旦用戶點擊某個按鈕，我想停止所有音樂並播放點擊的新音樂。

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

});

來源

2014-10-01 Kuwame Brown

您使用的是HTML音頻還是插件？ – carlodurso 2014-10-01 02:43:11

我只是用HTML – 2014-10-01 02:44:42

因爲您創建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元素。

來源

2014-10-01 13:36:11 pce

作品像魅力謝謝！ – 2014-10-02 20:54:12

你應該創建一個音頻標籤

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

沒有測試，希望它炒菜鍋。

來源

2014-10-01 03:30:52 carlodurso

播放音樂javascript

回答

相關問題