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 HTMLFor å 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
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
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