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 .

Flyte er en LightBulb som lever, og det er kult

Hva er det første som kommer til å tenke når du ser dette? La meg hjelpe: Hvordan er denne lyspæren flyter på toppen av den basen? For det andre, er det i blått å holde denne lyspæren opplyst?Magic.Vel, det magiske av magnetisk levitasjon og trådløs kraftoverføring, for å være presis. At LED-lyspæren holdes oppladet av en elektromagnet, og den lyser opp trådløst - se meg, ingen batterier eller strømkabler.Dette er Kicksta

(Tekniske og design tips)

4 Ny Dropbox Public Folder Endringer du trenger å vite

Er du en Dropbox- bruker? Da bør du vite at Dropboxs offentlige mappefunksjon har fått noen store endringer. Her er hva du trenger å vite om endringene i Dropbox's Public-mappe. Grunnleggende brukere vil se sin offentlige mappe omgjort til en standardmappe Fra og med 15. mars 2017, vil Dropbox Basic-brukere som har registrert etter 4. o

(Tekniske og design tips)