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 .

Gratis CloudFlare UI Framework voor ontwikkelaars van frontends

CloudFlare heeft onlangs een grote onderhoudsbeurt aangekondigd van hun systeem van Backbone naar React.js . Dit kwam met een bijgewerkte frontend UI-raamwerk en het team besloot om het voor iedereen te openen.Het CloudFlare UI Framework, afgekort CF-UI, is een gratis open source-bibliotheek met frontend-codes die kunnen worden gekoppeld aan een React-workflow

(Technische en ontwerptips)

Reis goedkoop met ride-sharing services met Google Maps

Rit-sharing diensten zoals Uber, Lyft, Grab, Ola en de anderen hebben zeker een revolutie teweeggebracht in de manier waarop we pendelen. Het is goedkoper, sneller, handiger en het beste is dat je een rit rechtstreeks vanaf je mobiele telefoon kunt boeken.Als ritdeling uw voorkeur is, weet u dan dat Google Maps u helpt prijzen, locaties en tijdsschattingen te vergelijken tussen de vele autoritdiensten

(Technische en ontwerptips)