Jak strumieniować obcięte audio przy użyciu API MediaSource
Z MediaSource API, możesz generuj i konfiguruj strumienie multimediów w przeglądarce. To pozwala wykonywać różne operacje na danych multimedialnych w posiadaniu znaczników HTML związanych z mediami, takich jak lub . Na przykład możesz mieszać różne strumienie, tworzyć nakładające się media, leniwy nośnik ładowania, i edytuj dane mediów takie jak zmiana głośności lub częstotliwości.
W tym poście zobaczymy, jak to zrobić strumień próbki audio (obcięty plik MP3) za pomocą MediaSource API w przeglądarce, aby to zrobić muzyka przed koncertem do twojej publiczności. Omówimy, jak to zrobić wykryć wsparcie dla API, jak połącz element multimedialny HTML do API, jak to zrobić pobrać media przez Ajax i wreszcie jak przesyłać strumieniowo.
Jeśli chcesz zobaczyć z wyprzedzeniem, co robimy, spójrz na kod źródłowy na Github, lub sprawdź strona demonstracyjna.
Krok 1. Utwórz kod HTML
Aby utworzyć HTML, dodaj tag z sterownica atrybut na twoją stronę. Dla kompatybilności wstecznej dodaj domyślny komunikat o błędzie dla użytkowników, których przeglądarki nie obsługują tej funkcji. Użyjemy JavaScript, aby włączyć / wyłączyć tę wiadomość.
Krok 2. Wykryj obsługę przeglądarki
W JavaScript utwórz próbuj złapać zablokuj to rzuć błąd jeśli Interfejs API MediaSource nie jest obsługiwany przez przeglądarkę użytkownika lub, innymi słowy, jeśli MediaSource (klucz) nie istnieje w okno obiekt.
try if (! 'MediaSource' w oknie) throw new ReferenceError ('Nie ma właściwości MediaSource w obiekcie okna.') catch (e) console.log (e); Krok 3. Wykryj obsługę MIME
Po sprawdzeniu wsparcia sprawdź również obsługa typu MIME. Jeśli typ MIME nośnika, który chcesz przesyłać strumieniowo, nie jest obsługiwany przez przeglądarkę, powiadomić użytkownika i rzuć błąd.
var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ('Nie można odtwarzać multimediów. Media typu MIME' + mime + 'nie są obsługiwane.'); throw ('Media typu' + mime + 'nie są obsługiwane.'); Pamiętaj, że powyższy fragment kodu musi być umieszczony wewnątrz próbować blok, przed łapać blok (dla odniesienia, postępuj zgodnie z numeracją linii lub sprawdź ostateczny plik JS na Github).
Krok 4. Połącz
Stwórz nowy MediaSource obiekt i przypisz go jako źródło etykietka za pomocą URL.createObjectURL () metoda.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); Krok 5. Dodaj a SourceBuffer oponować MediaSource
Gdy element multimedialny HTML uzyskuje dostęp do źródła multimediów i jest gotowy Stwórz SourceBuffer przedmioty, API MediaSource odpala a sourceopen zdarzenie .
The SourceBuffer obiekt trzyma kawałek mediów który jest ostatecznie dekodowany, przetwarzany i odtwarzany. Pojedynczy MediaSource obiekt może mieć wiele SourceBuffer przedmioty.
W środku obsługa zdarzeń sourceopen zdarzenie, dodać SourceBuffer oponować MediaSource z addSourceBuffer () metoda.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); Krok 6. Pobierz media
Teraz masz SourceBuffer obiekt, czas na pobierz plik MP3. W naszym przykładzie zrobimy to przez za pomocą żądania AJAX.
Posługiwać się arraybuffer tak jak typ_odpowiedzi, który oznacza dane binarne. Gdy odpowiedź zostanie pomyślnie pobrana, dołącz do SourceBuffer z appendBuffer () metoda.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; case 404: throw 'File Not Found'; default: throw 'Nie można pobrać plik '; catch (e) console.error (e);; xhr.send ();); Krok 7. Wskaż koniec strumienia
Gdy interfejs API zakończy dodawanie danych do SourceBuffer na zdarzenie wywołane aktualizuj jest zwolniony. Wewnątrz obsługi zdarzeń zadzwoń do koniec transmisji() metoda MediaSource do wskazują, że strumień się zakończył.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', function (_) mediaSource.endOfStream (); ); break; case 404: throw 'File Not Found'; default: throw 'Nie można pobrać pliku'; catch (e) console.error (e);; xhr.send ();) ; Krok 8. Obetnij plik multimedialny
The SourceBuffer obiekt ma dwie właściwości nazywa appendWindowStart i appendWindowEnd reprezentujący czas rozpoczęcia i zakończenia danych multimedialnych chcesz filtrować. Podświetlony kod poniżej filtruje pierwsze cztery sekundy MP3.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); Próbny
I to wszystko, nasze Próbka audio jest przesyłana strumieniowo prosto ze strony internetowej. Dla kod źródłowy, spójrz na nasze Repo Github a dla ostatecznego wyniku sprawdź strona demonstracyjna.
Obsługa przeglądarki
Począwszy od pisania tego posta MediaSource API jest oficjalnie obsługiwane we wszystkich głównych przeglądarkach. Ale testy pokazują, że W Firefoksie implementacja jest błędna, a przeglądarki Webkit nadal mają problemy z appendWindowStart własność.
Tak jak API MediaSource wciąż w fazie eksperymentalnej, dostęp do wyższych funkcji edycji może być ograniczony, ale podstawowe przesyłanie strumieniowe funkcja jest czymś, co możesz wykorzystaj od razu.
