음악 재생 자바 스크립트

Question

내 코드는 다음과 같습니다. 기본적으로, 내 목표는 일단 사용자가 특정 버튼을 클릭하면, 나는이 버튼의 ID를 얻고 아약스를 통해 그것을 보낸 다음 지정된 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과 같은 객체를 만들고 "종료 됨"과 같은 이벤트를 추가하는 것입니다.

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

당신은 오디오 태그 다음

가

---

document.getElementById('audio').pause(); $.post('ajax/play_sound.php', {data_id: data_id}, function(data){ document.getElementById('audio').src = data; document.getElementById('audio').play(); }); 

테스트하지 않았습니다

<audio src="audio.mp3" id="audio"></audio> 

을 만들 수는 웍 희망한다.