2012-11-06 15 views
13

Obecnie pracuję przy użyciu odtwarzacza audio HTML5, aby zapewnić strumień audio (strumień radiowy 24/7) za pośrednictwem przeglądarki (mobilnej). Ładowanie w strumieniu i odtwarzanie go działa dobrze.Zatrzymaj buforowanie dźwięku w tagu <audio>

Głównym problemem jest to, że znacznik HTML5 <audio> będzie nadal pobierał (buforował) zawartość, nawet gdy nie jest aktywny. Może to stanowić poważny problem dla użytkowników mobilnych, ponieważ większość z nich płaci za wykorzystanie danych. Do tej pory nie byłem w stanie znaleźć przyzwoitych rozwiązań, które działają w przeglądarce krzyżowej, aby temu zapobiec.

próbowałem dotąd:

  1. Unload źródłem gdy przerwa jest wciśnięty. < To nie działa w przeglądarce krzyżowej
  2. Usuń element odtwarzacza audio i załaduj nowy. To działa, ale szczerze mówiąc, jest to bardzo hackowaty sposób na wykonanie wyjątkowo prostego zadania, jakim jest .

Po prostu zastanawiałem się, czy jest coś, co przeoczyłem w tej kwestii, ponieważ jestem przekonany, że nie jestem jedyną osobą z tym problemem.

+1

Mam edytowany tytuł. Zobacz, "[Czy w tytułach pytania powinny znaleźć się" znaczniki "?] (Http://meta.stackexchange.com/questions/19190/)", gdzie konsensus brzmi "nie, nie powinien". –

+2

Po prostu zauważyłem, że usunięcie elementu z DOM nie zawsze powoduje odłączenie zasobu. Oznacza to, że strumień jest nadal pobierany. – Ruben

+0

@Ruben total yes, nawet jeśli bieżący DOM wyświetla tylko 1 gracza, przeglądarka nadal buforuje zasoby. Testowałem to właśnie teraz, stosując odtwarzacz shoutcast Ajax, który załadował mój strumień ponad 10 razy, ponieważ preload i ajax. Jeśli nie użyjesz "obciążenia wstępnego". tym lepiej, jeśli nie dodasz tagu dźwiękowego, chyba że klikniesz coś, na przykład, mały przycisk odtwarzacza;) – erm3nda

Odpowiedz

3

Znalazłem działające rozwiązanie dla problemu opisanego powyżej. Opis szczegółów można znaleźć tutaj: https://stackoverflow.com/a/13302599/1580615

+1

To nie jest dobre rozwiązanie i spowoduje błędy w pakiecie webkit (chrome, ios itp.) –

2

można wykonać następujące czynności, aby zatrzymać ładunek buforowania bez błędów:

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

lub skrócić się:

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

Teraz jesteś nie ładuje "", który jest złym adresem URL, aby tag dźwiękowy mógł zostać załadowany. Zamiast tego ładujesz rzeczywisty URL z Blob, który nie zawiera danych do odtwarzania audio.

+1

err in firefox: "Obiekt blobu zasobów mediów: http: // localhost: 4200/c68c796c-5af0-5343-a68d-9043c4c9b9a2 nie mógł zostać zdekodowany." err chrome: "GET blob: http: // localhost: 4200/fec774b7-7680-48a9-927e-1926685da447 416 (Wymagany zakres niezadowalający)" przy użyciu typu: "video/mp4" –

8

Element <audio> zawiera atrybut preload. Można to ustawić na "none" lub "metadata", co powinno uniemożliwić wstępne ładowanie dźwięku.

Źródło: https://developer.mozilla.org/en/docs/Web/HTML/Element/audio

+1

To najbardziej eleganckie rozwiązanie. Ustawienie "brak" nie pobrało żadnych danych, a ustawienie "metadanych" pobrało 517kb danych. Mój test dotyczył strumienia voscast. – Rohmer

+0

To nie tylko elegancki, to sposób na zrobienie tego. Próbowałem ustawić go na "false" jak noob :), ustawienie "none" zadziałało. U można również ustawić na "auto". Otrzymasz wiele problemów, jeśli masz źródła strumieniowe i strony ajaxowe. Obiekty audio są buforowane przez przeglądarkę, a zwiększysz wykorzystanie pasma przy każdym obciążeniu. – erm3nda

Powiązane problemy