Geçtiğimiz birkaç ay içinde WebKit Web Audio API, web'deki oyunlar ve ses uygulamaları için ilgi çekici bir platform olarak ortaya çıktı. Geliştiriciler bu konuyla ilgili bilgi edinirken benzer soruların tekrar tekrar sorulduğunu duyuyorum. Bu hızlı güncelleme, Web Audio API ile deneyiminizi daha keyifli hale getirmek için en sık sorulan sorulardan bazılarını yanıtlamayı amaçlamaktadır.
S: Yardım edin, ses çıkaramıyorum!
Y: Web Audio API'yi yeni kullanmaya başladıysanız başlangıç eğitimine veya Eric'in kullanıcı etkileşimine dayalı olarak ses çalma tarifine göz atın.
S. Kaç ses bağlamım olmalı?
Y: Genellikle her sayfaya bir AudioContext eklemeniz gerekir ve tek bir ses bağlamı, kendisine bağlı birçok düğümü destekleyebilir. Tek bir sayfaya birden fazla AudioContext ekleyebilirsiniz ancak bu durum performans düşüşüne neden olabilir.
S: noteOn() ile oynattığım bir AudioBufferSourceNode var ve bunu tekrar oynatmak istiyorum ancak noteOn() hiçbir şey yapmıyor. Yardıma ihtiyacım var.
Y: Bir kaynak düğümü oynatmayı tamamladıktan sonra daha fazla oynatamaz. Alttaki arabelleği tekrar oynatmak için yeni bir AudioBufferSourceNode oluşturup noteOn()'ı çağırmanız gerekir.
Kaynak düğümünü yeniden oluşturmak verimsiz gibi görünse de kaynak düğümleri bu kalıp için yoğun bir şekilde optimize edilmiştir. Ayrıca, AudioBuffer'a yönelik bir tutma yeri tutarsanız aynı sesi tekrar çalmak için öğeye başka bir istek göndermeniz gerekmez. Bu kalıbı tekrarlamanız gerekiyorsa oynatmayı playSound(buffer) gibi bir basit yardımcı işlevle kapsülleyin.
S: Bir sesi oynatırken neden her seferinde yeni bir kaynak düğümü oluşturmanız gerekiyor?
Y: Bu mimarinin amacı, ses öğesini oynatma durumundan ayırmaktır. Pikaptaki plaklara benzetirsek arabellekler plaklara, kaynaklar ise pikap iğnelerine benzer. Birçok uygulamada aynı arabelleğin birden fazla sürümü aynı anda oynatıldığından bu desen çok önemlidir.
S: audio ve video etiketlerinden gelen sesi nasıl işleyebilirim?
Y: MediaElementAudioSourceNode üzerinde çalışıyoruz. Kullanılabildiğinde yaklaşık olarak aşağıdaki gibi çalışır (ses etiketiyle oynatılan bir örneğe filtre efekti ekleme):
<audio src="sounds/sample.wav" controls>
var audioElement = document.querySelector('audio');
var mediaSourceNode = context.createMediaElementSource(audioElement);
mediaSourceNode.connect(filter);
filter.connect(context.destination);
Bu özellik bu crbug'da izlenir. Bu kurulumda mediaSourceNode.noteOn() öğesini çağırmanın gerekmediğini, oynatmanın ses etiketiyle kontrol edildiğini unutmayın.
S: Mikrofondan ne zaman ses alabilirim?
Y: Bunun ses girişi kısmı, getUserMedia kullanılarak WebRTC'nin bir parçası olarak uygulanacak ve Web Audio API'de özel bir kaynak düğümü olarak kullanılabilecektir. createMediaElementSource ile birlikte çalışır.
S: Bir AudioSourceNode oynatıldığında ne zaman tamamlandığını nasıl kontrol edebilirim?
Y: Web Audio API bu işlevi desteklemediğinden şu anda JavaScript zamanlayıcı kullanmanız gerekiyor. Web Audio API'yi Kullanmaya Başlama Eğitimi'ndeki aşağıdaki snippet, bunun uygulamadaki bir örneğidir:
// Assume source and buffer are previously defined.
source.noteOn(0);
var timer = setTimeout(function() {
console.log('playback finished');
}, buffer.duration * 1000);
Web Audio API'nin daha doğru bir geri çağırma işlevi uygulaması için açık bir hata bulunmaktadır.
S: Seslerin yüklenmesi, kullanıcı arayüzü iş parçacığının tamamen kilitlenmesine ve kullanıcı arayüzümün yanıt vermemesine neden oluyor. Yardım!**
Y: Ana iş parçacığının engellenmesini önlemek için asenkron yükleme amacıyla decodeAudioData API'sini kullanın. Bu örneğe bakın.
S: Web Audio API, sesleri gerçek zamandan daha hızlı işlemek için kullanılabilir mi?
Y: Evet, çözüm üzerinde çalışılıyor. Lütfen bizi takip etmeye devam edin.
S: Harika bir Web Audio API uygulaması oluşturdum ancak uygulamanın çalıştığı sekme arka plana geçtiğinde sesler garipleşiyor.
Y: Bunun nedeni, sayfa arka plana alındığında farklı şekilde davranan setTimeouts kullanıyor olmanız olabilir. Gelecekte Web Audio API, web sesinin dahili zamanlayıcısını (context.currentTime özelliği) kullanarak belirli zamanlarda geri çağırma yapabilecek. Daha fazla bilgi için lütfen bu özellik isteğini inceleyin.
Genel olarak, uygulamanız arka plana geçtiğinde oynatmayı durdurmanız önerilir. Sayfa Görünürlüğü API'sini kullanarak bir sayfanın arka plana ne zaman geçtiğini algılayabilirsiniz.
S: Web Audio API'yi kullanarak bir sesin perdesini nasıl değiştirebilirim?
Y: Kaynak düğümdeki playbackRate öğesini değiştirin.
S: Hızı değiştirmeden perdeyi değiştirebilir miyim?
Y: Web Audio API, ses bağlamında bir PitchNode'a sahip olabilir ancak bu, uygulaması zor bir özelliktir. Bunun nedeni, ses topluluğunda basit bir perde değiştirme algoritmasının olmamasıdır. Bilinen teknikler, özellikle perde kaymasının büyük olduğu durumlarda yapaylıklar oluşturur. Bu sorunu çözmek için iki tür yaklaşım vardır:
- Yinelenen segment yankısı yapaylıklarına neden olan zaman alanı algoritmaları
- Yankılı ses artefaktlarına neden olan frekans alanı teknikleri.
Bu teknikleri uygulamak için yerel bir düğüm olmasa da JavaScriptAudioNode ile yapabilirsiniz. Bu kod snippet'i başlangıç noktası olarak kullanılabilir.
S: Nasıl istediğim örnek hızında AudioContext oluşturabilirim?
Y: Bu özellik şu anda desteklenmemektedir ancak destek imkanlarını değerlendiriyoruz. Bu özellik isteğine göz atın.
Başka sorularınız varsa web-audio etiketini kullanarak StackOverflow'da sorabilirsiniz.