Miten katkaista lyhennettyä ääntä MediaSource API n avulla
Kanssa MediaSource API, sinä pystyt luoda ja määrittää mediavirtoja suoraan selaimessa. Sen avulla voit suorittaa erilaisia tietoja mediatiedoilla pidetään mediaan liittyvillä HTML-tunnisteilla, kuten tai . Esimerkiksi voit sekoita eri virtoja, luoda päällekkäisiä mediaa, laiska kuormitusväline, ja muokkaa mediatietoja kuten äänenvoimakkuuden tai taajuuden muuttaminen.
Tässä viestissä näemme erityisesti miten virtaa ääninäyte (lyhennetty MP3-tiedosto) MediaSource API oikeassa selaimessa esiteatterin musiikki yleisölle. Me katamme miten tunnista API: n tuki, miten kytke HTML-mediaelementti API: lle, miten hae media Ajaxin kautta ja lopulta miten virtaa sitä.
Jos haluat etukäteen nähdä, mitä olemme, katsokaa lähdekoodi Githubissa, tai tutustu demo-sivu.
Vaihe 1. Luo HTML
Voit luoda HTML-koodin lisäämällä tunnisteella ohjaimet ominaisuus sivulle. Myös taaksepäin yhteensopivuus lisää oletusvirhesanoma käyttäjille, joiden selaimet eivät tue ominaisuutta. Käytämme JavaScriptiä tämän viestin kytkemiseksi päälle / pois päältä.
Vaihe 2. Tunnista selaimen tuki
Luo JavaScript-sovelluksessa a yritä saada kiinni estä se heittää virhe jos MediaSource API: ta ei tueta käyttäjän selaimella tai, toisin sanoen, jos MediaSource (avain) ei ole olemassa vuonna ikkuna esine.
yritä if (! 'MediaSource' ikkunassa) heittää uusi ReferenceError ('Ei ole MediaSource-ominaisuutta ikkunan objektissa.') catch (e) console.log (e); Vaihe 3. Tunnista MIME-tuki
Tarkista tukitarkistuksen jälkeen myös MIME-tyypin tuki. Jos selain ei tue lähetettävän median MIME-tyyppiä, varoittaa käyttäjää ja heittää virhe.
var mime = 'audio / mpeg'; jos (! MediaSource.isTypeSupported (mime)) hälytys ('Ei voi toistaa mediaa. MIME-tyypin mediaa + + mime +' ei tueta. '); heittää ('Tyyppi' + mime + '-tyyppiä ei tueta.'); Huomaa, että yllä olevan koodinpätkän on oltava sijoitettu yrittää lohko, ennen saada kiinni lohko (viittaus, seuraa rivinumeroita tai tarkista lopullinen JS-tiedosto Githubissa).
Vaihe 4. Linkitä
Luoda uusi MediaSource ja määritä se tag käyttämällä URL.createObjectURL () menetelmä.
var audio = document.querySelector ('audio'), mediaSource = uusi MediaSource (); audio.src = URL.createObjectURL (mediaSource); Vaihe 5. Lisää a SourceBuffer objekti MediaSource
Kun HTML-mediaelementti käyttää medialähdettä ja on valmis luoda SourceBuffer esineet, MediaSource-sovellusliittymä tulipalot a sourceopen tapahtuma .
SourceBuffer esine omistaa kimpun mediaa joka dekoodataan, käsitellään ja toistetaan lopulta. Sinkku MediaSource objekti voi on useita SourceBuffer esineet.
Sisällä tapahtuman käsittelijä sourceopen tapahtuma, lisää SourceBuffer objekti MediaSource kanssa addSourceBuffer () menetelmä.
mediaSource.addEventListener ('sourceopen', toiminto () var sourceBuffer = this.addSourceBuffer (mime);); Vaihe 6. Hae media
Nyt kun sinulla on a SourceBuffer objekti, on aika hae MP3-tiedosto. Esimerkissämme teemme niin käyttämällä AJAX-pyyntöä.
Käyttää arraybuffer kuten responseType, joka tarkoittaa binaaridataa. Kun vastaus haetaan onnistuneesti, liitä se SourceBuffer kanssa appendBuffer () menetelmä.
mediaSource.addEventListener ('sourceopen', toiminto () var sourceBuffer = this.addSourceBuffer (mime); var xhr = uusi XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'masybuffer' ; xhr.onload = toiminto () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); tauko; tapaus 404: heittää 'tiedostoa ei löytynyt'; oletus: heittää ' file '; catch (e) console.error (e);; xhr.send ();); Vaihe 7. Ilmoita virran loppu
Kun API on lopettanut datan lisäämisen SourceBuffer tapahtuma kutsutaan updatend on potkut. Soita tapahtumakäsittelijän sisään endOfStream () menetelmän MediaSource että osoittavat, että virta on päättynyt.
mediaSource.addEventListener ('sourceopen', toiminto () var sourceBuffer = this.addSourceBuffer (mime); var xhr = uusi XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'masybuffer' ; xhr.onload = toiminto () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', toiminto (_) mediaSource.endOfStream (); ), tauko, tapaus 404: heittää 'Ei löydy tiedostoa', oletus: heittää 'Tiedoston nouto epäonnistui'; catch (e) console.error (e);; xhr.send ();) ; Vaihe 8. Katkaise mediatiedosto
SourceBuffer objektilla on kaksi ominaisuutta olla nimeltään appendWindowStart ja appendWindowEnd edustavat mediatiedon alkamis- ja päättymisaika haluat suodattaa. Alla oleva korostettu koodi suodattaa ensimmäiset neljä sekuntia MP3-levylle.
mediaSource.addEventListener ('sourceopen', toiminto () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); esittely
Ja se on kaikki, meidän ääninäyte lähetetään suoraan verkkosivulta. Varten lähdekoodi, katsokaa meidän Github repo ja lopullista tulosta varten demo-sivu.
Selaimen tuki
Kirjoittaessaan tämän viestin MediaSource API on virallisesti tuettu kaikissa tärkeimmissä selaimissa. Mutta testaus osoittaa, että täytäntöönpano on buginen Firefoxissa, ja Webkit-selaimissa on edelleen ongelmia appendWindowStart omaisuus.
Koska MediaSource API on vielä kokeellisessa vaiheessa, korkeampien muokkaustoimintojen käyttö saattaa olla rajoitettua, mutta suoratoisto ominaisuus on jotain voit Hyödynnä heti.
