Pengenalan
Permainan web sering memainkan berpuluh-puluh bunyi pendek. Memuatkan setiap satu sebagai failnya sendiri bermakna berpuluh-puluh permintaan, dan pada mudah alih sesetengah pelayar hanya membenarkan satu bunyi dimuatkan pada satu masa. Sprite audio menyelesaikan kedua-duanya: satu fail menyimpan setiap bunyi, dan manifes menyatakan di mana setiap satu berada.
Sprite biasanya dibina dengan alat baris arahan yang memerlukan FFmpeg. Pencipta Sprite Audio ToolBuddy membinanya dalam pelayar anda. Panduan ini bermula daripada klip longgar kepada sprite Howler.js yang berfungsi.
Kandungan pakej sprite
Pakej ini ialah satu fail audio dengan klip berturut-turut, dipisahkan oleh jurang pendek, dan manifes JSON. Dalam manifes Howler, setiap klip mempunyai ofset dan tempoh dalam milisaat dan bendera gelung; nama klip berasal daripada nama failnya.
Muatkan dan susun klip
Pilih klip anda: audio MP3, WAV, M4A, AAC, OGG/Opus, FLAC atau WebM. Ia muncul dalam kad Klip mengikut susunan yang anda tambahkan.
Isih mengikut nama atau saiz, atau gerakkan klip ke atas dan ke bawah. Tetapkan semula dalam pengepala Panel Kawalan akan memulihkan susunan yang anda tambahkan. Susunan hanya mempengaruhi kedudukan klip dalam fail; kod anda memainkannya mengikut nama.
Potong dan bentukkan setiap klip
Pilih klip untuk melihatnya; kemasannya dipaparkan sebagai pemegang pada bentuk gelombang. Dalam Panel Kawalan, tetapkan permulaan dan akhir yang tepat, gandaan, pudar masuk dan keluar, bendera gelung untuk katil muzik dan kemasan senyap di tepi.
| Tetapan klip | Julat | Mengapa |
|---|---|---|
| Mula / Tamat | Dalam klip | Potong bunyi mati atau klik |
| Gain | -24 hingga +24 dB | Imbangkan bunyi kuat dan senyap |
| Pudar masuk / keluar | 0 hingga 5 s | Elakkan klik di tepi |
| Gelung | Hidup / mati | Katil muzik dan suasana |
| Potong senyap | Hidup / mati | Tanggalkan plumbum masuk dan ekor yang senyap |
Tetapkan pilihan sprite
Pilih manifes Howler untuk Howler.js. Tetapkan kadar sampel (44.1 kHz sesuai dengan kebanyakan permainan; 22.05 kHz untuk fail yang lebih kecil), mono atau stereo, jurang antara klip (0.05 s secara lalai, jadi bunyi tidak akan bercampur antara satu sama lain), crossfade pilihan dan format output: MP3 atau OGG untuk saiz, WAV untuk penyuntingan.
Bina, pratonton, muat turun
Pilih Bina sprite. Pratonton bertukar kepada keseluruhan sprite dengan setiap klip sebagai jalur bernombor; klik jalur untuk memilih klip tersebut, atau tukar kepada Klip untuk mendengar satu bunyi sahaja.
Muat turun ZIP dengan audio dan JSON bersama-sama, atau JSON sahaja jika anda hanya menukar manifes.
Gunakannya dalam Howler.js
Muatkan sprite dengan Howl({ src: ['audio-sprite.mp3'], sprite: manifest.sprite }) baharu dan mainkan bunyi dengan sound.play('coin'). Hidangkan OGG bersama MP3 jika anda memerlukannya untuk pelayar lama; bina sprite dua kali dengan dua format.
- Kekalkan nama klip unik: ia menjadi kunci dalam peta sprite.
- Biarkan jurang lalai di tempatnya; ia hampir tidak memerlukan kos dan mengelakkan pertindihan.
- Gunakan bendera gelung untuk gelung latar belakang, bukan untuk kesan satu tangkapan.
Ofset yang boleh anda harapkan
Pengekod MP3 menambah kelewatan pendek pada permulaan fail, yang digunakan untuk mengalihkan setiap ofset sprite. ToolBuddy menulis pengepala tanpa jurang yang memberitahu penyahkod untuk melangkaunya, dan ujiannya menyahkod sprite dan menyemak setiap klip bermula di tempat yang dinyatakan dalam manifes.
Ditulis oleh
Ankit Kumar
Jurutera Perisian Kanan & Pengasas di ToolBuddy
Kejuruteraan utiliti pelayar pertama dengan keperluan muat naik sifar menggunakan teknologi WebAssembly, Audio Web dan Canvas.