Hoe getrunceerde audio te streamen met MediaSource API

Met de MediaSource API kunt u mediastreams genereren en configureren in de browser. Hiermee kunt u verschillende bewerkingen uitvoeren op mediagegevens die worden bewaard door media-gerelateerde HTML-tags zoals

In dit bericht zullen we specifiek zien hoe je een audiomonster (een afgekapt MP3-bestand) kunt streamen met de MediaSource API in de browser om muziek vooraf aan je publiek te laten zien. We bespreken hoe je ondersteuning voor de API kunt detecteren, hoe je het HTML-media-element kunt verbinden met de API, hoe je de media kunt ophalen via Ajax en hoe je het uiteindelijk kunt streamen .

Als je van tevoren wilt zien wat we van plan zijn, bekijk dan de broncode op Github of bekijk de demopagina .

Voeg een toe om de HTML te maken

Stap 2. Detecteer browserondersteuning

Maak in JavaScript een try…catch blok dat een fout veroorzaakt als de MediaSource API niet wordt ondersteund door de browser van de gebruiker, of met andere woorden als MediaSource (de sleutel) niet bestaat in het window .

 probeer {if (! 'MediaSource' in venster) nieuwe ReferenceError ('Er is geen MediaSource-eigenschap in het vensterobject.')} catch (e) {console.log (e); } 

Stap 3. Detecteer MIME-ondersteuning

Controleer na de supportcontrole ook of het MIME-type ondersteuning biedt . Als het MIME-type van het medium dat u wilt streamen, niet wordt ondersteund door de browser, meldt u de gebruiker en gooit u een foutmelding .

 var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) {alert ('Kan de media niet afspelen. Media van MIME-type' + mime + 'wordt niet ondersteund.'); throw ('Media van het type' + mime + 'wordt niet ondersteund.'); } 

Merk op dat het codefragment hierboven in het try blok moet worden geplaatst, vóór het catch blok (ter referentie, volg de regelnummering of bekijk het laatste JS-bestand op Github).

Stap 4. Koppel het

Maak een nieuw MediaSource object en wijs dit toe als de bron van het

 var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); 

Stap 5. Voeg een SourceBuffer object toe aan MediaSource

Wanneer een HTML-media-element toegang heeft tot een mediabron en gereed is om SourceBuffer objecten te maken, SourceBuffer de MediaSource API een sourceopen gebeurtenis af .

Het SourceBuffer object bevat een stuk media dat uiteindelijk wordt gedecodeerd, verwerkt en afgespeeld. Een enkel MediaSource object kan meerdere SourceBuffer objecten bevatten .

Voeg binnen de gebeurtenishandler van de sourceopen gebeurtenis een SourceBuffer object toe aan MediaSource met de methode addSourceBuffer() .

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = this.addSourceBuffer (mime);}); 

Stap 6. Haal de media op

Nu je een SourceBuffer object hebt, is het tijd om het MP3-bestand op te halen . In ons voorbeeld doen we dit met behulp van een AJAX-verzoek .

Gebruik arraybuffer als responseType, dat binaire gegevens aangeeft . Wanneer het antwoord met succes is opgehaald, voegt u het toe aan SourceBuffer met de methode appendBuffer() .

 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: gooi 'File Not Found'; default: throw 'Kan de fetch niet ophalen bestand ';}} catch (e) {console.error (e);}}; xhr.send ();}); 

Stap 7. Geef het einde van de stream aan

Wanneer de API klaar is met het toevoegen van de gegevens aan SourceBuffer een evenement genaamd updatend afgevuurd . In een gebeurtenishandler roept u de methode endOfStream() van MediaSource aan om aan te geven dat de stream is beëindigd .

 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 ();} ); pauze; case 404: gooi 'File Not Found'; standaard: throw 'Kan het bestand niet ophalen';}} catch (e) {console.error (e);}}; xhr.send ();}) ; 

Stap 8. Afkappen van het mediabestand

Het SourceBuffer object heeft twee eigenschappen, appendWindowStart genaamd appendWindowStart en appendWindowEnd die de begin- en eindtijd van de mediagegevens vertegenwoordigen die u wilt filteren. De gemarkeerde code hieronder filtert de eerste vier seconden van de MP3.

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0; ...}); 

demonstratie

En dat is alles: ons audiomonster wordt gestreamd vanaf de webpagina. Kijk voor de broncode op onze Github repo en voor het eindresultaat, kijk op de demopagina .

Browserondersteuning

Vanaf het moment dat dit bericht is geschreven, wordt de MediaSource API officieel ondersteund in alle belangrijke browsers. Maar het testen laat zien dat de implementatie buggy is in Firefox, en Webkit-browsers hebben nog steeds problemen met de appendWindowStart eigenschap.

Omdat de MediaSource-API zich nog in de experimentele fase bevindt, kan de toegang tot hogere bewerkingsfuncties beperkt zijn, maar de basisstroomeigenschap is iets waar u meteen gebruik van kunt maken .

Veer pictogrammen - een mooie, minimalistische en gratis iconen set

Als u op internet zoekt, vindt u talloze gratis sets met pictogrammen die op het internet zijn afgestemd. Deze zijn ongelooflijk handig voor alle soorten websites, omdat afbeeldingen altijd een lay-out opvullen.Het is erg moeilijk om gratis pictogramsets te vinden die passen bij uw ontwerp. Meestal is uw beste optie een minimalistische pictogrammenset zoals Doezelaar

(Technische en ontwerptips)

20 gratis sjablonen voor zakelijke nieuwsbrief om te downloaden

Promotie is een essentieel onderdeel van elk soort bedrijf en e-mailmarketing is een van de beste manieren om direct verkeer op uw website te krijgen. Via een e-mailnieuwsbrief kunt u uw nieuwste producten en services, nieuwe blogposts, verkoop en andere updates met uw abonnees delen.Het ontwerp van de e-mailnieuwsbrief moet zo eenvoudig mogelijk zijn, snel en gemakkelijk te openen en correct worden weergegeven

(Technische en ontwerptips)