Saya menggunakan HTML5 untuk memprogram game; kendala yang saya hadapi sekarang adalah bagaimana memainkan efek suara.

Persyaratan spesifik jumlahnya sedikit:

• Mainkan dan campur beberapa suara,
• Putar sampel yang sama beberapa kali, mungkin tumpang tindih pemutaran,
• Mengganggu pemutaran sampel di titik mana pun,
• Lebih disukai memutar file WAV yang berisi PCM mentah (kualitas rendah), tetapi saya dapat mengonversinya, tentu saja.

Pendekatan pertama saya adalah menggunakan <audio>elemen HTML5 dan mendefinisikan semua efek suara di halaman saya. Firefox memainkan file WAV hanya dengan sangat bagus, tetapi memanggil #playbeberapa kali tidak benar-benar memainkan sampel beberapa kali. Dari pemahaman saya tentang spesifikasi HTML5, <audio>elemen ini juga melacak status pemutaran, sehingga menjelaskan alasannya.

Pikiran langsung saya adalah untuk mengkloning elemen audio, jadi saya membuat pustaka JavaScript kecil berikut untuk melakukannya untuk saya (tergantung pada jQuery):

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;
      };
    });
  }
};

Jadi sekarang saya dapat melakukannya Snd.boom();dari Firebug console dan bermain snd/boom.wav, tetapi saya masih tidak bisa memainkan sampel yang sama beberapa kali. Tampaknya <audio>elemen tersebut lebih merupakan fitur streaming daripada memainkan efek suara.

Apakah ada cara cerdas untuk mewujudkan hal ini bahwa saya tidak ada, lebih baik hanya menggunakan HTML5 dan JavaScript?

Saya juga harus menyebutkan bahwa, lingkungan pengujian saya adalah Firefox 3.5 di Ubuntu 9.10. Browser lain yang saya coba - Opera, Midori, Chromium, Epiphany - menghasilkan hasil yang beragam. Beberapa tidak memainkan apa pun, dan beberapa melemparkan pengecualian.

AudioObjek HTML5

Anda tidak perlu repot dengan <audio>elemen. HTML 5 memungkinkan Anda mengakses Audioobjek secara langsung:

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

Tidak ada dukungan untuk pencampuran dalam versi spesifikasi saat ini.

Untuk memutar suara yang sama beberapa kali, buat beberapa instance Audioobjek. Anda juga bisa mengatur snd.currentTime=0objek setelah selesai diputar.

Karena konstruktor JS tidak mendukung <source>elemen fallback , Anda harus menggunakannya

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

untuk menguji apakah browser mendukung Ogg Vorbis.

Jika Anda menulis game atau aplikasi musik (lebih dari sekadar pemain), Anda akan ingin menggunakan API Audio Web yang lebih canggih , yang sekarang didukung oleh sebagian besar browser .

WebAudio API oleh W3C

Pada Juli 2012, WebAudio API sekarang didukung di Chrome, dan setidaknya sebagian didukung di Firefox, dan dijadwalkan akan ditambahkan ke iOS pada versi 6.

Meskipun cukup kuat untuk digunakan secara programatis untuk tugas-tugas dasar, elemen Audio tidak pernah dimaksudkan untuk memberikan dukungan audio penuh untuk game, dll. Itu dirancang untuk memungkinkan satu bagian media untuk disematkan dalam halaman, mirip dengan gambar menandai. Ada banyak masalah dengan mencoba menggunakan tag Audio untuk game:

• Slip pengaturan waktu sering terjadi pada elemen Audio
• Anda membutuhkan elemen Audio untuk setiap instance suara
• Memuat acara belum sepenuhnya dapat diandalkan
• Tidak ada kontrol volume umum, tidak ada pemudaran, tidak ada filter / efek

Saya menggunakan artikel Memulai Dengan WebAudio ini untuk memulai dengan WebAudio API. The Fieldrunners WebAudio Studi Kasus ini juga membaca yang baik.

howler.js

Untuk pembuatan game, salah satu solusi terbaik adalah menggunakan perpustakaan yang memecahkan banyak masalah yang kita hadapi saat menulis kode untuk web, seperti howler.js . howler.js mengabstraksi API Audio Web yang hebat (tapi level rendah) menjadi kerangka kerja yang mudah digunakan. Ini akan berusaha untuk kembali ke Elemen Audio HTML5 jika API Audio Web tidak tersedia.

var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg']
}).play();
// it also provides calls for spatial/3d audio effects (most browsers)
sound.pos3d(0.1,0.3,0.5);

wad.js

Perpustakaan hebat lainnya adalah wad.js , yang sangat berguna untuk memproduksi audio synth, seperti musik dan efek. Sebagai contoh:

var saw = new Wad({source : 'sawtooth'})
saw.play({
    volume  : 0.8,
    wait    : 0,     // Time in seconds between calling play() and actually triggering the note.
    loop    : false, // This overrides the value for loop on the constructor, if it was set. 
    pitch   : 'A4',  // A4 is 440 hertz.
    label   : 'A',   // A label that identifies this note.
    env     : {hold : 9001},
    panning : [1, -1, 10],
    filter  : {frequency : 900},
    delay   : {delayTime : .8}
})

Suara untuk Game

Pustaka lain yang mirip dengan Wad.js adalah " Sound for Games ", ia lebih fokus pada produksi efek, sambil menyediakan serangkaian fungsionalitas yang serupa melalui API yang relatif berbeda (dan mungkin lebih ringkas):

function shootSound() {
  soundEffect(
    1046.5,           //frequency
    0,                //attack
    0.3,              //decay
    "sawtooth",       //waveform
    1,                //Volume
    -0.8,             //pan
    0,                //wait before playing
    1200,             //pitch bend amount
    false,            //reverse bend
    0,                //random pitch range
    25,               //dissonance
    [0.2, 0.2, 2000], //echo array: [delay, feedback, filter]
    undefined         //reverb array: [duration, decay, reverse?]
  );
}

Ringkasan

Masing-masing perpustakaan ini patut dilihat, apakah Anda perlu memutar ulang file suara tunggal, atau mungkin membuat editor musik berbasis html Anda sendiri, efek generator, atau video game.

Anda mungkin juga ingin menggunakan ini untuk mendeteksi audio HTML 5 dalam beberapa kasus:

http://diveintohtml5.ep.io/everything.html

HTML 5 JS Detect function

function supportsAudio()
{
    var a = document.createElement('audio'); 
    return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}

Inilah salah satu metode untuk memungkinkannya memainkan suara yang sama secara bersamaan. Kombinasikan dengan preloader, dan Anda siap. Ini berfungsi dengan Firefox 17.0.1 setidaknya, belum mengujinya dengan yang lain.

// collection of sounds that are playing
var playing={};
// collection of sounds
var sounds={step:"knock.ogg",throw:"swing.ogg"};

// function that is used to play sounds
function player(x)
{
    var a,b;
    b=new Date();
    a=x+b.getTime();
    playing[a]=new Audio(sounds[x]);
    // with this we prevent playing-object from becoming a memory-monster:
    playing[a].onended=function(){delete playing[a]};
    playing[a].play();
}

Ikat ini ke tombol keyboard, dan nikmati:

player("step");

Kedengarannya seperti yang Anda inginkan adalah suara multi-saluran. Misalkan Anda memiliki 4 saluran (seperti pada game 16-bit yang benar-benar tua), saya belum sempat bermain dengan fitur audio HTML5, tapi bukankah Anda hanya perlu 4 elemen <audio>, dan siklus yang digunakan untuk memainkan efek suara selanjutnya? Sudahkah Anda mencobanya? Apa yang terjadi? Jika berhasil: Untuk memutar lebih banyak suara secara bersamaan, tambahkan saja lebih banyak elemen <audio>.

Saya telah melakukan ini sebelumnya tanpa elemen HTML5 <audio>, menggunakan objek Flash kecil dari http://flash-mp3-player.net/ - Saya menulis kuis musik ( http://webdeavour.appspot.com/ ) dan menggunakannya untuk memutar klip musik ketika pengguna mengklik tombol untuk pertanyaan. Awalnya saya punya satu pemain per pertanyaan, dan itu mungkin untuk bermain mereka di atas satu sama lain, jadi saya mengubahnya jadi hanya ada satu pemain, yang saya tunjuk klip musik yang berbeda.

Lihatlah situs jai (-> mirror ) (antarmuka audio javascript). Dari melihat sumber mereka, mereka tampaknya menelepon play()berulang kali, dan mereka menyebutkan bahwa perpustakaan mereka mungkin cocok untuk digunakan dalam permainan berbasis HTML5.

Anda dapat menjalankan beberapa acara audio secara bersamaan, yang dapat digunakan untuk membuat game Javascript, atau memiliki suara yang berbicara di atas musik latar belakang

Untuk memainkan sampel yang sama beberapa kali, apakah tidak mungkin melakukan hal seperti ini:

e.pause(); // Perhaps optional
e.currentTime = 0;
e.play();

( eadalah elemen audio)

Mungkin saya benar-benar salah memahami masalah Anda, apakah Anda ingin efek suara diputar beberapa kali pada saat yang sama? Maka ini sepenuhnya salah.

Ini ide. Muat semua audio Anda untuk kelas suara tertentu ke dalam elemen audio tunggal di mana data src adalah semua sampel Anda dalam file audio yang bersebelahan (mungkin ingin beberapa keheningan di antaranya sehingga Anda dapat menangkap dan memotong sampel dengan timeout dengan lebih sedikit risiko perdarahan ke sampel berikutnya). Kemudian, cari sampelnya dan mainkan saat dibutuhkan.

Jika Anda membutuhkan lebih dari satu untuk memainkannya, Anda dapat membuat elemen audio tambahan dengan src yang sama sehingga di-cache. Sekarang, Anda secara efektif memiliki beberapa "trek". Anda dapat memanfaatkan grup trek dengan skema alokasi sumber daya favorit Anda seperti Round Robin dll.

Anda juga bisa menentukan opsi lain seperti mengantri suara ke trek untuk diputar ketika sumber daya itu tersedia atau memotong sampel yang sedang diputar.

http://robert.ocallahan.org/2011/11/latency-of-html5-sounds.html

http://people.mozilla.org/~roc/audio-latency-repeating.html

Bekerja dengan baik di Firefox dan Chrome untuk saya.

Untuk menghentikan suara yang Anda mulai, lakukan var sound = document.getElementById ("shot"). CloneNode (true); sound.play (); dan kemudian sound.pause ();

Saya akan merekomendasikan menggunakan SoundJS , perpustakaan yang saya bantu kembangkan. Ini memungkinkan Anda untuk menulis basis kode tunggal yang berfungsi di mana-mana, dengan SoundJS memilih audio web, audio html, atau audio flash yang sesuai.

Ini akan memungkinkan Anda untuk melakukan semua hal yang Anda inginkan:

• Mainkan dan campur beberapa suara,
• Putar sampel yang sama beberapa kali, mungkin tumpang tindih pemutaran
• Memutus pemutaran sampel di titik mana pun
• memutar file WAV yang mengandung (tergantung pada dukungan browser)

Semoga itu bisa membantu.

Bermain multi-shot dengan <audio>elemen tunggal tidak dimungkinkan . Anda perlu menggunakan beberapa elemen untuk ini.

Saya mengalami ini saat memprogram generator kartu musicbox. Dimulai dengan perpustakaan yang berbeda tetapi setiap kali ada kesalahan entah bagaimana. Kelambatan implementasi audio normal buruk, tidak ada beberapa pemutaran ... akhirnya berakhir menggunakan perpustakaan lowlag + soundmanager:

http://lowlag.alienbill.com/ dan http://www.schillmania.com/projects/soundmanager2/

Anda dapat memeriksa implementasinya di sini: http://musicbox.grit.it/

Saya membuat file wav + ogg untuk memainkan multi browser. Musicbox player ini bekerja responsif di ipad, iphone, Nexus, mac, pc, ... berfungsi untuk saya.

Saya tahu ini adalah total hack tetapi saya pikir saya harus menambahkan sampel ini perpustakaan audio open source yang saya pakai github beberapa waktu lalu ...

https://github.com/run-time/jThump

Setelah mengklik tautan di bawah ini, ketikkan tombol baris rumah untuk memainkan riff blues (juga ketik beberapa tombol secara bersamaan, dll.)

Sampel menggunakan perpustakaan jThump >> http://davealger.com/apps/jthump/

Ini pada dasarnya bekerja dengan membuat <iframe>elemen tak terlihat yang memuat halaman yang memutar suara onReady ().

Ini tentu saja tidak ideal tetapi Anda dapat memberi +1 solusi ini hanya berdasarkan kreativitas (dan fakta bahwa itu adalah open source dan berfungsi di browser apa pun yang pernah saya coba) Saya harap ini memberi orang lain setidaknya mencari beberapa ide.

:)

Jawaban yang dipilih akan bekerja dalam segala hal kecuali IE. Saya menulis tutorial tentang cara membuatnya bekerja lintas browser = http://www.andy-howard.com/how-to-play-sounds-cross-browser-includes-ie/index.html

Inilah fungsi yang saya tulis;

function playSomeSounds(soundPath)
 {

 var trident = !!navigator.userAgent.match(/Trident\/7.0/);
 var net = !!navigator.userAgent.match(/.NET4.0E/);
 var IE11 = trident && net
 var IEold = ( navigator.userAgent.match(/MSIE/i) ? true : false );
 if(IE11 || IEold){
 document.all.sound.src = soundPath;
 }
 else
 {
 var snd = new Audio(soundPath); // buffers automatically when created
 snd.play();
 }
 };

Anda juga perlu menambahkan tag berikut ke halaman html:

<bgsound id="sound">

Akhirnya Anda dapat memanggil fungsi dan cukup melewati jalur di sini:

playSomeSounds("sounds/welcome.wav");

Anda selalu dapat mencobanya AudioContextmemiliki dukungan terbatas tetapi merupakan bagian dari draft kerja api audio web . Mungkin bermanfaat jika Anda berencana untuk merilis sesuatu di masa depan. Dan jika Anda hanya memprogram untuk chrome dan Firefox, Anda adalah yang terbaik.

API Audio Web adalah alat yang tepat untuk pekerjaan ini. Ada sedikit pekerjaan yang terlibat dalam memuat file suara dan memainkannya. Untungnya ada banyak perpustakaan di luar sana yang menyederhanakan pekerjaan. Karena tertarik pada suara, saya juga membuat perpustakaan bernama musquito. Anda juga bisa melihatnya .

Saat ini hanya mendukung efek suara memudar dan saya sedang mengerjakan hal-hal lain seperti spasialisasi 3D.