SORU
19 Aralık 2009, CUMARTESİ


JavaScript / ses efektleri HTML5

Onun soylu bir amaç için HTML5 kullanıyorum: oyunlar, tabii ki! Şimdi karşılaştığım engel ses efektleri oynamak için nasıl.

Oyun eski bir Macintosh oyunu bir liman ve yaşı nedeniyle, gereksinimleri az:

  • Mix ve birden sesler oynayın
  • Aynı örneği birden çok kez, muhtemelen dinlenme örtüşen oyna
  • Herhangi bir noktada bir örnek kesme oynatma
  • Tercihen WAV dosyaları (düşük kaliteli) ham PCM içeren oyun, ama bu, tabii ki dönüştürebilirsiniz

İlk yaklaşımım HTML5 <audio> öğesi kullanımı ve benim sayfadaki tüm ses efektleri tanımlamak için. Bu şahane WAV dosyalarını çalar Firefox ama arayan #birden çok kez gerçekten örnek birden çok kez oynamak istemiyor oyun. HTML5 spec anladığım kadarıyla, <audio> eleman da çalma durumunu izler, bu açıklıyor.

Hemen aklıma gelen ses öğeleri çoğaltmak için, benim için bunu yapmak için aşağıdaki küçük javascript Kütüphanesi (jquery bağlıdır) yarattım:

var Snd = {
  init: function() {
    $("audio").each(function() {
      var src = this.getAttribute('src');
      if (src.substring(0, 4) !== "snd/") { return; }
      // Cut out the basename (strip directory and extension)
      var name = src.substring(4, src.length - 4);
      // Create the helper function, which clones the audio object and plays it
      var Constructor = function() {};
      Constructor.prototype = this;
      Snd[name] = function() {
        var clone = new Constructor();
        clone.play();
        // Return the cloned element, so the caller can interrupt the sound effect
        return clone;
      };
    });
  }
};

Şimdi yapabilirimEriyor.() patlama;bu Firebug konsol ve oyun '/boom eriyor.'. wav Temiz. Ama ben hala aynı örneği birden çok kez oynayamaz. Bu <audio> görünüyor; eleman gerçekten bir akış özelliği daha ziyade ses efektleri ile oynamak için bir şey.

Atladığım akıllı bir şekilde bunu yapmak için var mı? Bu deney, bu iki teknoloji üzerinde duruldu çünkü Preferebly HTML5 ve Javascript içinde bir şey. (Ve Flash herhangi bir deneyim eksikliği ya da Silverlight.)

Ayrıca, benim test ortamı 3.5 Ubuntu 9.10 üzerinde Firefox olduğunu söylemeliyim. Diğer -- Opera, Midori, Krom, Epiphany -- değişken sonuçlar üretti denedim tarayıcılar. Bazı oyun bir şey yok, ve bazı istisnalar atmak.

CEVAP
19 Aralık 2009, CUMARTESİ


<audio> elemanları ile rahatsız etmek gerekmez. HTML 5 10 ** doğrudan erişim sağlar

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();

Spec geçerli sürüm karıştırma desteği yok.

Aynı ses birden çok kez oynamak, Audio nesne birden çok örneğini oluşturun. Ayrıca oyun bittikten sonra nesne üzerinde snd.currentTime=0 ayarlayabilirsiniz.


JS yapıcı <source> geri dönüş öğeleri desteklemiyor bu yana kullanmalısınız

(new Audio()).canPlayType("audio/ogg; codecs=vorbis")

tarayıcı Ogg Vorbis desteği olup olmadığını test edin.

(YANİ < 11 değil) şu anda tüm iyi tarayıcıları destekler Dalga dosya.


Soon more advanced Web Audio API kullanmak mümkün olacak.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • merumputdotcom

    merumputdotc

    24 ŞUBAT 2012
  • NCIX Tech Tips

    NCIX Tech Ti

    2 Ocak 2007
  • RogerBuckChrist

    RogerBuckChr

    9 Temmuz 2011