Bagaimana Audio Terkini Stream Menggunakan MediaSource API
Dengan MediaSource API, awak boleh menjana dan mengkonfigurasi aliran media betul dalam pelayar. Ia membolehkan anda untuk melakukan pelbagai operasi pada data media yang dipegang oleh tag HTML berkaitan media seperti atau . Sebagai contoh, anda boleh campurkan aliran yang berbeza, mewujudkan media yang bertindih, media beban malas, dan edit metrik media seperti menukar volum atau kekerapan.
Dalam siaran ini, kami akan secara khusus melihat bagaimana arahkan sampel audio (fail MP3 dipenggal) dengan MediaSource API betul dalam penyemak imbas untuk muzik pra-tayangan kepada penonton anda. Kami akan menolong bagaimana mengesan sokongan API, bagaimana untuk sambungkan elemen media HTML kepada API, bagaimana untuk ambil media melalui Ajax, dan akhirnya bagaimana aliran itu.
Sekiranya anda ingin melihat terlebih dahulu apa yang kami perlukan, lihatlah kod sumber pada Github, atau periksa halaman demo.
Langkah 1. Buat HTML
Untuk membuat HTML, tambah satu tag dengan a kawalan atribut ke halaman anda. Untuk keserasian ke belakang, juga tambah mesej ralat lalai untuk pengguna yang penyemak imbasnya tidak menyokong ciri tersebut. Kami akan menggunakan JavaScript untuk menghidupkan / mematikan mesej ini.
Langkah 2. Mengesan sokongan penyemak imbas
Dalam JavaScript, buat a cuba tangkap blok yang akan membuang kesilapan jika MediaSource API tidak disokong oleh penyemak imbas pengguna, atau, dengan kata lain jika MediaSource (kunci) tidak wujud di dalam tingkap objek.
cuba jika (! 'MediaSource' di tetingkap) membuang RujukanPenghantaran baru ('Tidak ada sifat MediaSource dalam objek tetingkap.') tangkapan (e) console.log (e); Langkah 3. Nilaikan sokongan MIME
Selepas cek sokongan, semak juga sokongan jenis MIME. Jika jenis media MIME yang anda mahu strim tidak disokong oleh penyemak imbas, maklumkan pengguna dan membuang kesilapan.
var mime = 'audio / mpeg'; jika (! MediaSource.isTypeSupported (mime)) alert ('Tidak dapat memainkan media Media jenis MIME' + mime + 'tidak disokong.'); buang ('Media jenis' + mime + 'tidak disokong.'); Ambil perhatian bahawa coretan kod di atas perlu diletakkan di dalam cuba blok, sebelum itu tangkapan blok (untuk rujukan, ikut penomboran baris atau semak fail JS terakhir pada Github).
Langkah 4. Pautan
Buat yang baru MediaSource objek, dan tetapkan ia sebagai sumber tag dengan menggunakan URL.createObjectURL () kaedah.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); Langkah 5. Tambah a SourceBuffer objek kepada MediaSource
Apabila elemen media HTML mengakses sumber media dan bersedia untuk buat SourceBuffer objek, API MediaSource kebakaran a sumber terbuka acara .
The SourceBuffer objek memegang sebilangan besar media yang akhirnya diuraikan, diproses dan dimainkan. Satu tunggal MediaSource objek boleh mempunyai pelbagai SourceBuffer objek.
Di dalam acara pengendali acara sumber terbuka acara, tambahkan SourceBuffer objek kepada MediaSource dengan addSourceBuffer () kaedah.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); Langkah 6. Ambil media
Sekarang anda mempunyai a SourceBuffer objek, sudah tiba masanya ambil fail MP3. Dalam contoh kami, kami akan berbuat demikian menggunakan permintaan AJAX.
Guna arraybuffer sebagai responsType, yang mana menandakan data binari. Apabila respons berjaya diambil, tambahnya SourceBuffer dengan appendBuffer () kaedah.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break 404: throw 'File Not Found'; default: throw 'Fail to fetch fail '; tangkapan (e) console.error (e);; xhr.send ();); Langkah 7. Tunjukkan akhir aliran
Apabila API telah selesai menambahkan data kepada SourceBuffer a acara dipanggil updatend dipecat. Di dalam pengendali acara, panggil endOfStream () kaedah MediaSource kepada nyatakan bahawa strim telah berakhir.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', function (_) mediaSource.endOfStream (); ); fail 404: buang 'Fail Not Found'; lalai: buang 'Gagal ambil fail'; tangkapan (e) console.error (e);; xhr.send (); ; Langkah 8. Puncilah fail media
The SourceBuffer objek mempunyai dua sifat dipanggil appendWindowStart dan appendWindowEnd mewakili tarikh mula dan tamat masa data media anda mahu menapis. Kod yang diketengahkan di bawah menapis empat saat pertama MP3.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0; ...); Demo
Dan itu semua, kami sampel audio disiarkan betul dari laman web. Untuk kod sumber, lihatlah kami Repo github dan untuk keputusan akhir, periksa halaman demo.
Sokongan penyemak imbas
Sebagai penulisan jawatan ini, MediaSource API disokong secara rasmi di semua pelayar utama. Tetapi ujian menunjukkan bahawa pelaksanaannya adalah kereta api di Firefox, dan penyemak imbas Webkit masih mempunyai masalah dengannya appendWindowStart harta.
Sebagai API MediaSource adalah masih dalam peringkat eksperimennya, akses kepada fungsi penyuntingan yang lebih tinggi mungkin terhad tetapi penstriman asas ciri adalah sesuatu yang anda boleh gunakan segera.
