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 .

Er personlig merkevare unaturlig?
Det er offisielt: designere i disse dager trenger absolutt å utvikle sine personlige merker for å markedsføre seg til kunder. Uten et minneverdig personlig merke som stikker i folks sinn, er du bare en annen designer som flyter der ute i det endeløse hav av konkurranse, og du må kjempe med dem for de samme jobbene.Pers

5 Android Apps for Less Boring Lock-skjermer
Låseskjermen er både en viktig og overflødig funksjon av smarttelefonen. På den ene siden er det viktig å holde deg unna et uhell, ringe til noen eller starte en app, og bidra til å forhindre uautorisert tilgang til telefonen din. På den andre er låseskjermen en ekstra (men frustrerende) ting du må bypass for å komme til appene du trenger .Android-b