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 .

20 Beste gratis e-mailmarketingtools en -bronnen

Zelfs na tientallen jaren in het internetmarketingscenario, is e-mailmarketing nog steeds een van de meest effectieve technieken om uw bedrijf online te promoten. Waarom? Gewoon omdat het functies biedt die geen enkele andere marketingtechniek biedt. Functies zoals data-driven marketing, gepersonaliseerde berichten, actiegerichte campagnes en kosteneffectiviteit

(Technische en ontwerptips)

Ontwerphandleiding voor het werken met stijlgidsen en stijltegels

Het creëren van een merkidentiteit is geen eenvoudige taak. Het vergt zware inspanningen, maar het is ook een van de meest lonende creatieve taken. Webprojecten combineren branding vaak met interface-ontwerp . Dit kan verwarrend zijn omdat er in beide gebieden zoveel te doen is. Stijlgidsen en stijltegels zijn geweldige bronnen voor webontwerpers en hoewel ze hetzelfde klinken, hebben ze twee verschillende taken .

(Technische en ontwerptips)