Så här laddar du ned trunkerad ljud med hjälp av MediaSource API
Med MediaSource API, du kan generera och konfigurera medieströmmar precis i webbläsaren. Det tillåter dig att utföra en mängd olika operationer på mediedata innehas av media-relaterade HTML-taggar som eller . Till exempel kan du blanda olika strömmar, skapa överlappande media, lata lastmedia, och redigera medievärden till exempel ändra volymen eller frekvensen.
I det här inlägget ser vi specifikt hur strömma ett ljudprov (en avkortad MP3-fil) med MediaSource API precis i webbläsaren för att pre-show musik till din publik. Vi kommer att täcka hur vi ska upptäcka stöd för API: n, hur anslut HTML-medieelementet till API, hur man gör det hämta media via Ajax, och äntligen hur strömma det.
Om du vill se i förväg vad vi ska göra, ta en titt på källkod på Github, eller kolla in demo sida.
Steg 1. Skapa HTML
För att skapa HTML, lägg till en tagga med a kontroller attribut till din sida. För bakåtkompatibilitet, också lägg till ett standardfelmeddelande för användare vars webbläsare inte stöder funktionen. Vi använder JavaScript för att aktivera / avaktivera det här meddelandet.
Steg 2. Upptäck webbläsarsupport
I JavaScript skapar du en försök fånga blockera den vilja kasta ett fel om MediaSource API stöds inte av användarens webbläsare, eller med andra ord om Mediasource (nyckeln) existerar inte i fönster objekt.
försök if (! 'MediaSource' i fönstret) kasta ny ReferenceError ('Det finns ingen MediaSource-egenskap i fönsterobjekt.') fånga (e) console.log (e); Steg 3. Upptäck MIME-stöd
Efter supportkontrollen, kolla även på stöd av MIME-typen. Om MIME-typen av det media du vill strömma inte stöds av webbläsaren, varna användaren och kasta ett fel.
var mime = 'audio / mpeg'; om (! MediaSource.isTypeSupported (mime)) alert ('Kan inte spela media. Media av MIME-typ' + mime + 'stöds inte.'); kasta ('Media of type' + mime + 'stöds inte.'); Observera att kodavsnittet ovan måste vara placerad inuti Prova blockera, Innan fånga block (för referens, följ linjenummering eller kolla in den slutliga JS-filen på Github).
Steg 4. Länka
Skapa en ny Mediasource objekt och Tilldela det som källan till märka genom att använda URL.createObjectURL () metod.
var audio = document.querySelector ("audio"), mediaSource = ny MediaSource (); audio.src = URL.createObjectURL (mediaSource); Steg 5. Lägg till en SourceBuffer protestera mot Mediasource
När ett HTML-medieelement åtkomst till en mediekälla och är redo att skapa SourceBuffer objekt, MediaSource API brinner a sourceopen händelse .
De SourceBuffer objekt har en massa media som så småningom avkodas, bearbetas och spelas. En enda Mediasource objekt kan har flera SourceBuffer objekt.
Inuti händelsehanterare av sourceopen händelse, Lägg till en SourceBuffer protestera mot Mediasource med addSourceBuffer () metod.
mediaSource.addEventListener ('sourceopen', funktion () var sourceBuffer = this.addSourceBuffer (mime);); Steg 6. Hämta media
Nu när du har en SourceBuffer objekt, det är dags att hämta MP3-filen. I vårt exempel gör vi det för med en AJAX-förfrågan.
Använda sig av arraybuffer som responseType, som betecknar binär data. När svaret hämtas framgångsrikt, lägg till den till SourceBuffer med appendBuffer () metod.
mediaSource.addEventListener ( 'sourceopen', function () var sourceBuffer = this.addSourceBuffer (mim); var XHR = new XMLHttpRequest; xhr.open ( 'GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try omkopplare (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; case 404: kasta 'Filen hittades inte'; default: throw 'gick inte att hämta den fil '; fånga (e) console.error (e);; xhr.send (););
Steg 7. Ange slutet på strömmen
När API: n har slutfört lägger till data till SourceBuffer en händelse som kallas updatend är avfyrade. Inne i en händelsehanterare, ring på delningen avslutad() metod av Mediasource till ange att strömmen är slut.
mediaSource.addEventListener ( 'sourceopen', function () var sourceBuffer = this.addSourceBuffer (mim); var XHR = new XMLHttpRequest; xhr.open ( 'GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try omkopplare (this.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ( 'updateend', funktion (_) mediaSource.endOfStream (); ); break; case 404: kasta 'filen hittades inte'; default: throw 'inte att hämta filen'; catch (e) console.error (e);; xhr.send ();) ;
Steg 8. Avkorta mediefilen
De SourceBuffer objektet har två egenskaper kallad appendWindowStart och appendWindowEnd representerar start- och sluttid för mediedata du vill filtrera. Den markerade koden nedan filtrerar de första fyra sekunderna av MP3.
mediaSource.addEventListener ( 'sourceopen', function () var sourceBuffer = this.addSourceBuffer (mim); sourceBuffer.appendWindowEnd = 4,0; ...);
demo
Och det är allt vårt ljudprov streamas direkt från webbsidan. För källkod, ta en titt på vårt Github repo och för det slutliga resultatet, kolla in demo sida.
Webbläsarstöd
Som att skriva detta inlägg, the Mediasource API stöds officiellt i alla större webbläsare. Men testningen visar att Implementering är buggy i Firefox, och webkit webbläsare har fortfarande problem med appendWindowStart fast egendom.
Som MediaSource API är fortfarande i sitt experimentella stadium, tillgång till högre redigeringsfunktioner kan vara begränsad men grundläggande streaming funktionen är något du kan utnyttja genast.
