Html5 자바 스크립트 코드에서 오디오가 한 번만 재생됩니다.

Question

연결에 문제가 있으면 알림 음을 울리려고하는 대시 보드 웹 앱이 있습니다. 사이트의 아약스 코드는 데이터를 폴링하고 연결할 수없는 경우 새로 고침 빈도를 줄입니다. 서버가 다시 가동되면 사이트는 계속 작동합니다.

나는 소리가 연결될 수 없을 때마다 소리를 내고 싶다. (그래서 나는 서버를 확인한다). 여기에 그 코드가 있습니다. 이 코드는 작동합니다.

var error_audio = new Audio("audio/"+settings.refresh.error_audio); 
error_audio.load(); 

//this gets called when there is a connection error. 
function onConnectionError() { 
    error_audio.play(); 
} 

그러나 두 번째로는 오디오가 재생되지 않습니다. Chrome의 디버거에서 파헤 치면 오디오 요소의 '재생 된'속성이 true로 설정됩니다. false로 설정하면 결과가 없습니다. 어떤 아이디어?

Answer 1

크롬/사파리 브라우저의 최신 버전에서이 문제를 해결 한 예상대로 위의 코드는 작동합니다. 나는 고정 된 정확한 버전을 확신하지 못한다.

Answer 2

재생하기 전에 error_audio.currentTime을 0으로 설정하십시오. 자동으로 처음으로 돌아 가지 않을 수도 있습니다.

Answer 3

Chrome은 Range HTTP 헤더를 통해 파일을 여러 부분으로 요청하므로 Content-Range 응답 헤더를 구현해야합니다.

는 여기를 참조하십시오 :이 구현되면 HTML5 <audio> Safari live broadcast vs not

의 play() 기능과 currentTime 속성이 작동합니다 설정을 모두.

Answer 4

더 많은 검색을 한 후에 오디오 요소의 source 속성을 다시 설정해야 다시 검색 할 수 있습니다. 네트워크 작업이 발생하지 않으며 작업이 크게 최적화되므로 걱정하지 마십시오.

var error_audio = new Audio("audio/"+settings.refresh.error_audio); 
error_audio.load(); 

//this gets called when there is a connection error. 
function onConnectionError() { 
    error_audio.src = "audio/"+settings.refresh.error_audio; 
    error_audio.play(); 
} 

이 동작은 크롬 21로 표현됩니다. FF는 src를 두 번 설정해도 신경 쓰이지 않습니다!

Answer 5

Q : 나는 오디오 재생 기능을 가지고 있는데, 나는 꼭()으로 다시 재생했고, 다시 재생하고 싶지만, 아무 것도하지 않는다! 도움!

A : 원본 노드가 재생을 완료하면 더 이상 재생할 수 없습니다. 기본 버퍼를 다시 재생하려면 새 AudioBufferSourceNode를 만들고 noteOn()을 호출해야합니다.

원본 노드를 다시 만들면 비효율적 일 수 있지만 소스 노드는이 패턴에 크게 최적화됩니다. 게다가, AudioBuffer 핸들을 유지하면, 같은 사운드를 다시 재생하기 위해 애셋을 다시 요청할 필요가 없습니다. 이 패턴을 반복 할 필요가있는 경우 playSound (버퍼)와 같은 간단한 도우미 함수로 재생을 캡슐화하십시오.

Q : 사운드를 재생할 때마다 왜 새로운 소스 노드를 만들어야합니까?

A :이 아키텍처의 개념은 오디오 자산을 재생 상태에서 분리하는 것입니다. 레코드 플레이어 유추를 보면, 버퍼는 레코드 헤드와 재생 헤드의 소스와 유사합니다. 많은 응용 프로그램이 동일한 버퍼의 여러 버전을 동시에 재생하므로이 패턴은 필수적입니다.

소스 :

http://updates.html5rocks.com/2012/01/Web-Audio-FAQ

Answer 6

오디오가 끝나기 전에 일시 중지하고 현재 재생 시간을 0으로 변경 한 다음 재생해야합니다. Javascript/Jquery to control HTML5 audio elements -이 링크를 확인하십시오 - How to handle/control the HTML5 audio elements?을 설명합니다. 그것은 당신을 도울 수 있습니다!