Slik strekker du avkortet lyd ved hjelp av MediaSource API

Med MediaSource API kan du generere og konfigurere mediestrømmer rett i nettleseren. Den lar deg utføre en rekke operasjoner på mediedata som holdes av medierelaterte HTML-koder, for eksempel

I dette innlegget ser vi spesielt hvordan du streamer en lydprøve (en avkortet MP3-fil) med MediaSource API rett i nettleseren for å forhåndsvise musikk til publikum. Vi vil dekke hvordan du oppdager støtte for API, hvordan du kobler HTML-medieelementet til API, hvordan du henter media via Ajax, og til slutt hvordan du streamer det .

Hvis du vil se på forhånd hva vi skal gjøre, ta en titt på kildekoden på Github, eller sjekk demo siden .

For å lage HTML, legg til en

Trinn 2. Oppdag nettleserstøtte

I JavaScript, opprett et try…catch blokk som vil kaste en feil hvis MediaSource API ikke støttes av brukerens nettleser, eller med andre ord hvis MediaSource (nøkkelen) ikke eksisterer i vinduobjektet.

 prøv {if (! 'MediaSource' i vinduet) kaste nye ReferenceError ('Det finnes ingen MediaSource-egenskap i vinduobjekt.'}} catch (e) {console.log (e); } 

Trinn 3. Oppdag MIME-støtte

Etter støttekontrollen, kontroller du også om støtten til MIME-typen . Hvis MIME-typen av mediet du vil streame, ikke støttes av nettleseren, varsle brukeren og kaste en feil .

 var mime = 'audio / mpeg'; hvis (! MediaSource.isTypeSupported (mime)) {alert ('Kan ikke spille av media. Media of MIME type' + mime + 'støttes ikke.'); kaste ('Media of type' + mime + 'støttes ikke.'); } 

Merk at kodestykket ovenfor må plasseres inne i prøveblokken, før catch (referanse, følg linjenummeringen eller sjekk den endelige JS-filen på Github).

Trinn 4. Koble til

Opprett et nytt MediaSource objekt, og tilordne det som kilden til

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

Trinn 5. Legg til et SourceBuffer objekt til MediaSource

Når et HTML-medieelement åpner en mediekilde og er klar til å opprette SourceBuffer objekter, brenner MediaSource API en sourceopen .

SourceBuffer objektet inneholder en del av media som til slutt dekodes, behandles og spilles. Et enkelt MediaSource objekt kan ha flere SourceBuffer objekter .

Inne i hendelseshandleren til sourceopen, legg til et SourceBuffer objekt til MediaSource med addSourceBuffer() -metoden.

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

Trinn 6. Hent media

Nå som du har et SourceBuffer objekt, er det på tide å hente MP3-filen . I vårt eksempel vil vi gjøre det ved å bruke en AJAX-forespørsel .

Bruk arraybuffer som arraybuffer, som angir binære data . Når svaret hentes vel, legg det til SourceBuffer med appendBuffer() -metoden.

 mediaSource.addEventListener ('sourceopen', funksjon () {var sourceBuffer = this.addSourceBuffer (mime); var xhr = ny XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () {prøv {switch (this.status) {tilfelle 200: sourceBuffer.appendBuffer (this.response); break; case 404: kaste 'fil ikke funnet'; standard: kaste 'Kunne ikke hente fil ';}} fangst (e) {console.error (e);}}; xhr.send ();}); 

Trinn 7. Angi slutten av strømmen

Når API-en er ferdig med å legge dataene til SourceBuffer en hendelse som heter updatend, avbrutt . Inne i en hendelsesbehandler, ring endOfStream() -metoden til MediaSource å indikere at strømmen er avsluttet .

 mediaSource.addEventListener ('sourceopen', funksjon () {var sourceBuffer = this.addSourceBuffer (mime); var xhr = ny XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () {prøv {switch (this.status) {tilfelle 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('oppdatering', funksjon (_) {mediaSource.endOfStream ();} ); pause 404: kaste "fil ikke funnet"; standard: kaste "Kunne ikke hente filen";}} fange (e) {console.error (e);}}; xhr.send ();}) ; 

Trinn 8. Avkort mediafilen

SourceBuffer objektet har to egenskaper kalt appendWindowStart og appendWindowEnd representerer start- og sluttidspunktet for mediedataene du vil filtrere. Den uthevede koden nedenfor filtrerer de første fire sekundene av MP3.

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

Demo

Og det er alt, vår lydprøve streames direkte fra nettsiden. For kildekoden, ta en titt på vår Github repo og for det endelige resultatet, sjekk demo siden .

Nettleserstøtte

Når du skriver dette innlegget, støttes MediaSource API offisielt i alle de store nettleserne. Men testen viser at implementeringen er buggy i Firefox, og Webkit-nettlesere har fortsatt problemer med egenskapen appendWindowStart .

Som MediaSource API er fortsatt i sitt eksperimentelle stadium, kan tilgang til høyere redigeringsfunksjoner være begrenset, men den grunnleggende streamingfunksjonen er noe du kan gjøre bruk av med en gang .

10 viktige Windows Phone Apps for Avid Travelers

Reise rundt i verden høres ut (og faktisk er det) mye moro. Vi skal oppdage nye attraksjoner, matvarer, folk og enda viktigere smaker steder. Men før vi går på ditt nye eventyr, må vi få mange ting forberedt på å ta imot reisen til vi er hjemme igjen, inkludert installering av mobilapper.Disse mobilappene hjelper på mange måter, for eksempel planlegging på rute, finne tilbud om hoteller og flyrater, bilutleie eller taxi, og steder og matvarer. Hvis du e

(Tekniske og design tips)

Friske ressurser for webutviklere - mai 2017

En samling av nyttige nettressurser er noe som en webutvikler ser frem til å ha i sin verktøykasse. Derfor er jeg selv en utvikler, og jeg prøver å presentere deg de beste og nyeste webutviklingsressursene hver måned.Denne måneds samling inneholder en interessant gratis app til screencasting, et par rammer basert på Material Design Language, et par bibliotek for Performance Testing, CLIs, og en håndfull av andre nyttige ressurser . Så, la

(Tekniske og design tips)