играть музыку 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();
});

});

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 и создания HTML-элемента для audio,

1

Другие решения

Вы должны создать аудио тег

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

Не проверял, надеюсь, он проснется.

0

По вопросам рекламы [email protected]