играть музыку JavaScript
Мой код ниже. По сути, моя цель — как только пользователь нажмет определенную кнопку, я получу идентификатор этой кнопки и отправлю ее через ajax, затем верну URL-адрес 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();
});
});
Решение
Потому что вы создали 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 и создания HTML-элемента для audio,
Другие решения
Вы должны создать аудио тег
<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();
});
Не проверял, надеюсь, он проснется.