MediaSource API'sını Kullanarak Kesilmiş Ses Nasıl Aktarılır
İle MediaSource API'sı, yapabilirsin medya akışları oluşturmak ve yapılandırmak Tarayıcıda Size izin verir Medya verileri üzerinde çeşitli işlemler gerçekleştirmek gibi medya ile ilgili HTML etiketleri tarafından tutulan veya . Örneğin, yapabilirsiniz farklı akışları karıştır, örtüşen medya oluştur, tembel yük ortamı, ve medya metriklerini düzenle ses seviyesini veya frekansı değiştirmek gibi.
Bu yayında özellikle nasıl yapılacağını göreceğiz. bir ses örneği akışı (kesilmiş bir MP3 dosyası) MediaSource API'sı tarayıcıda sağa gösteri öncesi müzik izleyicilerinize. Nasıl yapacağız API desteğini algılamak, nasıl HTML ortam öğesini bağlayın API'ye nasıl yapılır medyayı al Ajax ile ve nihayet nasıl yapılır akış.
Neyin peşinde olduğumuzu önceden görmek istiyorsanız, Github'daki kaynak kodu, ya da kontrol et demo sayfası.
1. Adım. HTML'yi oluşturun.
HTML’yi oluşturmak için ile etiketle kontroller nitelik sayfanıza. Geriye dönük uyumluluk için, ayrıca varsayılan bir hata mesajı ekle tarayıcıları bu özelliği desteklemeyen kullanıcılar için. Bu mesajı açmak / kapatmak için JavaScript kullanacağız..
Adım 2 tarayıcı desteğini tespit
JavaScript’te bir dene… yakala engelleyeceğim hata atmak Eğer MediaSource API'sı desteklenmiyor Kullanıcının tarayıcısı veya başka bir deyişle MediaSource (anahtar) mevcut değil içinde pencere nesne.
deneyin if (! 'pencerede MediaSource')) yeni ReferenceError'u at ('window nesnesinde MediaSource özelliği yok.') catch (e) console.log (e); Adım 3. MIME desteğini algılama
Destek kontrolünden sonra, MIME türü desteği. Akış yapmak istediğiniz ortamın MIME türü tarayıcı tarafından desteklenmiyorsa, kullanıcıyı uyar ve hata atmak.
var mime = 'ses / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ('Medya oynatılamıyor. MIME türü medya' + mime + 'desteklenmiyor.'); throw ('Medya' + mime + 'türü desteklenmiyor.'); Yukarıdaki kod snippet'inin olması gerektiğini unutmayın. içine yerleştirilmiş Deneyin blok, önce yakalamak blok (referans için satır numaralandırmasını izleyin veya Github'daki son JS dosyasına göz atın).
4. Adım.
Yeni bir tane oluştur MediaSource nesne ve kaynağı olarak ata etiket kullanarak URL.createObjectURL () yöntem.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); 5. Adım. SourceBuffer itiraz etmek MediaSource
Bir HTML medya elemanı ne zaman bir medya kaynağına erişir ve hazır yaratmak SourceBuffer nesneleri, MediaSource API'sı a sourceopen Etkinlik .
SourceBuffer nesne bir yığın medya tutar sonunda çözülür, işlenir ve oynanır. Bir tek MediaSource nesne olabilir çoklu var SourceBuffer nesneleri.
İçinde olay işleyicisi sourceopen Etkinlik, ekle SourceBuffer itiraz etmek MediaSource ile addSourceBuffer () yöntem.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); 6. Adım. Medyayı alın
Şimdi bir tane var SourceBuffer nesne, zamanı geldi MP3 dosyasını al. Örneğimizde, bunu yapacağız bir AJAX isteği kullanarak.
kullanım arraybuffer gibi responseType, hangi ikili veriyi gösterir. Yanıt başarıyla alındığında, eklemek SourceBuffer ile appendBuffer () yöntem.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = yeni XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; case 404: 'Dosya Bulunamadı'; default: throw 'getirilemedi dosya '; catch (e) console.error (e);; xhr.send ();); Adım 7. Akışın sonunu belirtin
API verileri eklemeyi bitirdiğinde SourceBuffer bir olay denir updatend kovuldu. Bir olay işleyicisinin içinde akıntının sonu() yöntemi MediaSource için akışın sona erdiğini belirtin.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = yeni XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try anahtar (this.status) vaka 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', function (_) mediaSource.endOfStream (); ); break; case 404: 'Dosya Bulunamadı' komutunu verin; default: throw 'Dosya alınamadı'; catch (e) console.error (e);; xhr.send ();) ; Adım 8. Medya dosyasını kısaltın
SourceBuffer nesnenin iki özellik denilen appendWindowStart ve appendWindowEnd temsil eden medya verilerinin başlangıç ve bitiş zamanları filtrelemek istiyorsun. Aşağıdaki vurgulanan kod ilk dört saniyeyi filtreler MP3’ün.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); gösteri
Ve hepsi bu, bizim ses örneği yayınlandı sağ web sayfasından. İçin kaynak kodu, bir göz at Github deposu ve nihai sonuç için demo sayfası.
Tarayıcı desteği
Bu yazıyı yazarken MediaSource API, tüm büyük tarayıcılarda resmi olarak desteklenmektedir. Ancak test göstermektedir ki Firefox’ta uygulama aracı, ve Webkit tarayıcıları hala appendWindowStart özellik.
MediaSource API'sı gibi hala deneysel aşamasında, daha yüksek düzenleme işlevlerine erişim sınırlı olabilir temel akış özellik yapabileceğiniz bir şey hemen faydalanmak.
