2012-11-06 2 views
13

현재 HTML5 오디오 플레이어를 사용하여 (모바일) 브라우저를 통해 오디오 스트림 (24/7 라디오 스트림)을 제공하고 있습니다. 스트림에로드하고 재생하면 정상적으로 작동합니다.<audio> 태그에서 오디오 버퍼링을 중지하십시오.

중요한 문제는 HTML5 <audio> 태그가 비활성 상태 일 때도 콘텐츠를 다운로드 (버퍼링)합니다. 이는 대부분 모바일 사용자가 데이터 사용료를 부담하기 때문에 중요한 문제 일 수 있습니다. 지금까지 나는 이것을 방지하기 위해 브라우저를 통과하는 적절한 솔루션을 찾을 수 없었습니다.

는 지금까지 시도 :

  1. 언로드 소스 일시 정지를 누르면. < 브라우저 간 이동이 작동하지 않습니다.
  2. 오디오 플레이어 요소를 제거하고 새 것을로드하십시오. 이것은 작동하지만 솔직히 말해서,이 작업은 매우 단순한 작업 인 을 수행하는 매우 위험한 방법입니다.

나는이 이슈가있는 유일한 사람이 아니라고 확신하기 때문에이 모든 문제에서 내가 간과하는 것이 있는지 궁금해하고있었습니다.

+1

제목을 편집했습니다. "[제목에"태그 "가 포함되어 있어야합니까?] (http://meta.stackexchange.com/questions/19190/)"합의가 "아니오, 그렇지 않아야합니다"로 표시되어야합니다. –

+2

DOM에서 요소를 제거한다고해서 반드시 리소스가 분리되는 것은 아닙니다. 스트림이 아직 다운로드 중임을 의미합니다. – Ruben

+0

@Ruben 완전히 예, 현재 DOM이 1 명의 플레이어 만 보여도 브라우저는 여전히 리소스를 캐싱하고 있습니다. 지금 테스트 해 보았습니다. Ajax shoutcast 플레이어를 구현하면 프리로드 및 아약스가 10 번 이상로드됩니다. "사전로드"를 사용하지 않는 경우. 예를 들어 작은 플레이어 버튼과 같은 것을 클릭하지 않으면 오디오 태그를 포함하지 않는 것이 좋습니다.) – erm3nda

답변

3

위에서 설명한 문제에 대한 실행 가능한 해결책을 찾았습니다. 상세 설명을 여기에서 찾을 수 있습니다 : 최대 단축,

var blob = new Blob([], {type: "audio/mp3"}); 
var url = URL.createObjectURL(blob); 
audio.src = _url; 

또는 :

audio.src = URL.createObjectURL(new Blob([], {type:"audio/mp3"}); 

지금 당신은로드하지 않는 당신이 할 수있는 https://stackoverflow.com/a/13302599/1580615

+1

이것은 좋은 해결책이 아니며 웹킷 (chrome, ios 등)에 오류를 발생시킵니다. –

2

오류없이 버퍼링로드를 중지하려면 다음을 a ""는 시도하고로드 할 오디오 태그에 대한 잘못된 URL입니다. 대신 재생할 오디오에 대한 데이터가없는 Blob로 만든 실제 URL을로드하는 것입니다.

+1

err in firefox : "미디어 리소스 BLOB : http : // localhost : 4200/c68c796c-5af0-5343-a68d-9043c4c9b9a2을 디코딩 할 수 없습니다." 오류 : "video/mp4"유형을 사용할 때 "Blob을 얻으십시오 : http : // localhost : 4200/fec774b7-7680-48a9-927e-1926685da447 416 (요청 된 범위가 만족스럽지 않음)" –

8

<audio> 요소는 preload 속성을 포함합니다. 오디오 사전로드를 방지하는 "none"또는 "metadata"로 설정할 수 있습니다.

출처 : https://developer.mozilla.org/en/docs/Web/HTML/Element/audio

+1

이것은 가장 우아한 해결책입니다. "없음"으로 설정하면 데이터가 다운로드되지 않고 517kb의 데이터가 다운로드 된 "메타 데이터"로 설정됩니다. 내 시험은 voscast 스트림에 대한 것이 었습니다. – Rohmer

+0

그것은 우아 할뿐만 아니라 그것을하는 방법입니다. 나는 멍청한 놈처럼 거짓으로 설정하려고 삼진했다. "none"으로 설정하면 효과가 있었다. U는 "자동"으로 설정할 수도 있습니다. 스트림 소스와 아약스 페이지가 있으면 문제가 생길 수 있습니다. 오디오 객체는 브라우저에 의해 캐싱되고, 모든로드와 함께 대역폭 사용량이 증가합니다. – erm3nda

관련 문제