Cara Streaming Audio Terpotong Menggunakan MediaSource API
Dengan API MediaSource, kamu bisa buat dan konfigurasikan stream media tepat di browser. Itu memungkinkan Anda untuk melakukan berbagai operasi pada data media dipegang oleh tag HTML terkait media seperti atau . Misalnya, Anda bisa mencampur aliran yang berbeda, buat media yang tumpang tindih, malas memuat media, dan edit metrik media seperti mengubah volume atau frekuensi.
Dalam posting ini, kita akan secara khusus melihat caranya streaming sampel audio (file MP3 terpotong) dengan API MediaSource tepat di browser untuk musik pra-pertunjukan untuk audiens Anda. Kami akan membahas bagaimana caranya mendeteksi dukungan untuk API, bagaimana caranya hubungkan elemen media HTML ke API, bagaimana caranya ambil medianya via Ajax, dan akhirnya bagaimana caranya streaming itu.
Jika Anda ingin melihat terlebih dahulu apa yang sedang kami lakukan, lihat kode sumber di Github, atau lihat halaman demo.
Langkah 1. Buat HTML
Untuk membuat HTML, tambahkan tag dengan kontrol atribut ke halaman Anda. Untuk kompatibilitas ke belakang, juga tambahkan pesan kesalahan default untuk pengguna yang browsernya tidak mendukung fitur ini. Kami akan menggunakan JavaScript untuk menghidupkan / mematikan pesan ini.
Langkah 2. Deteksi dukungan browser
Dalam JavaScript, buat a coba tangkap memblokir kehendak itu melempar kesalahan jika API MediaSource tidak didukung oleh browser pengguna, atau, dengan kata lain jika Sumber Media (kunci) tidak ada dalam jendela obyek.
coba if (! 'MediaSource' di jendela) lempar ReferenceError baru ('Tidak ada properti MediaSource di objek jendela.') catch (e) console.log (e); Langkah 3. Deteksi dukungan MIME
Setelah cek dukungan, periksa juga untuk mendukung tipe MIME. Jika jenis MIME dari media yang ingin Anda streaming tidak didukung oleh browser, beri tahu pengguna dan melempar kesalahan.
var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ('Tidak dapat memutar media. Media tipe MIME' + mime + 'tidak didukung.'); throw ('Media tipe' + mime + 'tidak didukung.'); Perhatikan bahwa cuplikan kode di atas harus ditempatkan di dalam mencoba blok, sebelum menangkap blokir (untuk referensi, ikuti penomoran baris atau lihat file JS terakhir di Github).
Langkah 4. Tautkan
Buat yang baru Sumber Media objek, dan menetapkannya sebagai sumber menandai dengan menggunakan URL.createObjectURL () metode.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); Langkah 5. Tambahkan a SourceBuffer objek untuk Sumber Media
Saat elemen media HTML mengakses sumber media dan siap untuk membuat SourceBuffer benda, API MediaSource kebakaran a sumber terbuka peristiwa .
Itu SourceBuffer obyek memegang sepotong media yang akhirnya diterjemahkan, diproses dan dimainkan. Tunggal Sumber Media objek bisa memiliki beberapa SourceBuffer benda.
Di dalam pengendali acara sumber terbuka peristiwa, tambah sebuah SourceBuffer objek untuk Sumber Media dengan addSourceBuffer () metode.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); Langkah 6. Ambil media
Sekarang Anda sudah punya SourceBuffer objek, saatnya untuk ambil file MP3. Dalam contoh kita, kita akan melakukannya menggunakan permintaan AJAX.
Menggunakan arraybuffer sebagai Jenis tanggapan, yang menunjukkan data biner. Ketika respons berhasil diambil, tambahkan ke SourceBuffer dengan appendBuffer () metode.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = XMLHttpRequest baru; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () coba switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; case 404: throw 'File Not Found'; default: throw 'Gagal mengambil file '; catch (e) console.error (e);; xhr.send ();); Langkah 7. Tunjukkan akhir aliran
Setelah API selesai menambahkan data ke SourceBuffer sebuah acara yang disebut updatend dipecat. Di dalam pengendali acara, hubungi ujung sungai() metode dari Sumber Media untuk menunjukkan bahwa aliran telah berakhir.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = XMLHttpRequest baru; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () coba switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', fungsi (_) mediaSource.endOfStream (); ); break; case 404: throw 'File Not Found'; default: throw 'Gagal mengambil file'; catch (e) console.error (e);; xhr.send ();) ; Langkah 8. Potong file media
Itu SourceBuffer objek memiliki dua properti bernama appendWindowStart dan appendWindowEnd mewakili mulai dan berakhirnya data media Anda ingin memfilter. Kode yang disorot di bawah ini menyaring empat detik pertama dari MP3.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); Demo
Dan itu saja, milik kita sampel audio dialirkan langsung dari halaman web. Untuk Kode sumber, lihat kami Github repo dan untuk hasil akhir, lihat halaman demo.
Dukungan browser
Pada penulisan posting ini, the Sumber Media API secara resmi didukung di semua browser utama. Tetapi pengujian menunjukkan bahwa implementasi buggy di Firefox, dan browser Webkit masih memiliki masalah dengan appendWindowStart milik.
Seperti API MediaSource masih dalam tahap percobaan, akses ke fungsi pengeditan yang lebih tinggi mungkin terbatas tetapi streaming dasar Fitur adalah sesuatu yang Anda bisa memanfaatkan segera.
