no.hideout-lastation.com
Paradis For Designere Og Utviklere


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 .

Trinn 1. Lag HTML

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 .

Du vil endelig (sorta) komme til å bruke Facebook på jobb med arbeidsplassen

Du vil endelig (sorta) komme til å bruke Facebook på jobb med arbeidsplassen

Kontor-sentriske sosiale nettverkstjenester som Yammer and Slack er en velsignelse for bedrifter, slik at ansatte fra ulike avdelinger i et selskap kan kommunisere med hverandre i en enkelt app eller et nettsted. I dag, etter år med intern testing, har Facebook gitt ut sin egen ta på kontorsbasert sosial nettverkstjeneste: Arbeidsplass .T

(Tekniske og design tips)

10 fantastiske proteseutskiftninger som gjør oss til delmann, delmaskin

10 fantastiske proteseutskiftninger som gjør oss til delmann, delmaskin

Aimee Mullins ble født med en tilstand som krevde at bena hennes var amputert under kneet i en tidlig alder. Dette forhindret henne imidlertid ikke på å bli en verdensklasse idrettsutøver i spor og felt, som representerte Amerika i 1996-paralympiske spill, ved hjelp av proteser. Aimee har også en karriere innen modellering og er en levende inspirasjon til de som ikke ønsker å bli definert av sine fysiske begrensninger.Kjent

(Tekniske og design tips)