Suara Dinamik dengan API Audio Web-tutorial css-php.cn

Suara Dinamik dengan API Audio Web

Takeaways Key

API Audio Web membolehkan manipulasi, analisis, dan penyimpangan data gelombang mentah, menjadikannya sesuai untuk aplikasi seperti permainan dan penyuntingan bunyi. Ia juga menawarkan API kemas yang disokong dengan baik di seluruh pelayar.
API membolehkan penciptaan objek audiocontext, yang boleh digunakan untuk merangkum data audio, dan pelbagai audionodes yang boleh dirantai bersama untuk manipulasi bunyi yang kompleks. Ini boleh digunakan untuk membuat bunyi dinamik, seperti menukar padang bunyi enjin dalam permainan simulator penerbangan.
Selain main balik asas, API membolehkan manipulasi bunyi yang lebih canggih, seperti konvolusi dan membentuk gelombang. Ini boleh digunakan untuk menghasilkan kesan bunyi yang realistik, seperti suara yang datang melalui pembesar suara. Di samping itu, API juga membolehkan main balik audio dan gelung gapless, menyelesaikan masalah biasa yang dihadapi dalam permainan web.

Artikel ini adalah sebahagian daripada siri Web Dev dari Microsoft. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Sebelum API Audio Web, HTML5 memberi kita elemen audio. Ia mungkin kelihatan sukar untuk diingat sekarang, tetapi sebelum elemen audio, pilihan terbaik kami untuk bunyi dalam penyemak imbas adalah plugin! Elemen audio itu, sememangnya menarik tetapi ia mempunyai tumpuan yang sangat baik. Ia pada dasarnya adalah pemain video tanpa video, baik untuk audio panjang seperti muzik atau podcast, tetapi tidak sesuai untuk tuntutan permainan. Kami memasang (atau menemui penyelesaian untuk) masalah gelung, had bunyi serentak, gangguan dan kekurangan akses kepada data bunyi itu sendiri.

Untungnya, kesabaran kami telah membuahkan hasil. Di mana elemen audio mungkin kurang, API Audio Web menyampaikan. Ia memberi kita kawalan yang tidak pernah berlaku sebelum ini dan ia sesuai untuk segala -galanya dari permainan ke penyuntingan bunyi yang canggih. Semua ini dengan API kemas yang sangat menyeronokkan untuk digunakan dan disokong dengan baik.

Mari kita menjadi lebih spesifik: Audio web memberi anda akses kepada data bentuk gelombang mentah bunyi dan membolehkan anda memanipulasi, menganalisis, memutarbelitkan atau mengubahnya. Ia adalah untuk audio API kanvas untuk piksel. Anda mempunyai akses yang mendalam dan kebanyakannya tidak terkawal ke data bunyi. Ia sangat kuat!

Tutorial ini adalah yang kedua dalam siri pada Arcade Penerbangan - dibina untuk menunjukkan apa yang mungkin di platform web dan dalam pelayar Microsoft Edge baru dan enjin rendering EdgeHTML. Kod interaktif dan contoh untuk artikel ini juga terletak di: http://www.flightarcade.com/learn/

[YouTube xyaq9tpmxra]

Bunyi penerbangan

Malah versi awal Simulator Penerbangan membuat usaha untuk mencipta semula perasaan penerbangan menggunakan bunyi. Salah satu bunyi yang paling penting ialah padang dinamik enjin yang berubah dengan pendikit. Kami tahu bahawa, ketika kami mengulangi semula permainan untuk web, bunyi enjin statik akan kelihatan rata, jadi padang dinamik bunyi enjin adalah calon yang jelas untuk audio web.

anda boleh mencubanya secara interaktif di sini.

kurang jelas (tetapi mungkin lebih menarik) adalah suara pengajar penerbangan kami. Pada awal lelaran Penerbangan Arcade, kami memainkan suara pengajar seperti yang telah direkodkan dan ia terdengar seperti ia keluar dari gerai bunyi! Kami perhatikan bahawa kami mula merujuk kepada suara sebagai "narator" dan bukannya "pengajar." Entah bagaimana bunyi murni memecahkan ilusi permainan. Ia tidak kelihatan betul untuk mempunyai audio yang sempurna yang datang ke atas bunyi kokpit yang bising. Oleh itu, dalam kes ini, kami menggunakan audio web untuk memohon beberapa gangguan mudah untuk arahan suara dan meningkatkan realisme pembelajaran untuk terbang!

Terdapat contoh audio pengajar pada akhir artikel. Di bahagian di bawah, kami akan memberi anda pandangan yang sangat terperinci tentang bagaimana kami menggunakan API Audio Web untuk mencipta bunyi ini.

Menggunakan API: AudioContext dan Sumber Audio

Langkah pertama dalam mana -mana projek audio web adalah untuk membuat objek AudioContext. Sesetengah pelayar (termasuk Chrome) masih memerlukan API ini untuk dipraktikkan, jadi kod itu kelihatan seperti ini:

maka anda memerlukan bunyi. Anda sebenarnya boleh menjana bunyi dari awal dengan API Audio Web, tetapi untuk tujuan kami, kami ingin memuatkan sumber audio yang dirakamkan. Jika anda sudah mempunyai elemen audio HTML, anda boleh menggunakannya tetapi banyak kali anda tidak akan. Lagipun, siapa yang memerlukan elemen audio jika anda mempunyai audio web? Paling biasa, anda hanya akan 'memuat turun audio terus ke dalam penampan dengan permintaan HTTP:

Sekarang kita mempunyai audiocontext dan beberapa data audio. Langkah seterusnya adalah untuk mendapatkan perkara -perkara ini bekerja bersama -sama. Untuk itu, kita perlukan ...

Audionodes

hampir semua yang anda lakukan dengan audio web berlaku melalui beberapa jenis audionode dan mereka datang dalam pelbagai perisa: beberapa nod digunakan sebagai sumber audio, beberapa sebagai output audio dan beberapa sebagai pemproses audio atau penganalisis. Anda boleh mengikat mereka bersama -sama untuk melakukan perkara yang menarik.

Anda mungkin memikirkan audiocontext sebagai jenis tahap bunyi. Pelbagai instrumen, penguat dan penceramah yang mengandungi semua jenis audionodes yang berbeza. Bekerja dengan API Audio Web adalah seperti memasang semua perkara ini bersama -sama (instrumen ke, katakan, pedal kesan dan pedal ke dalam penguat dan kemudian penceramah, dll.).

Nah, untuk melakukan sesuatu yang menarik dengan sumber audio audioContext yang baru diperoleh, kita perlu terlebih dahulu merangkum data audio sebagai sumber audion.

main balik

itu sahaja. Kami mempunyai sumber. Tetapi sebelum kita dapat memainkannya, kita perlu menyambungkannya ke nod destinasi. Untuk kemudahan, AudioContext mendedahkan nod destinasi lalai (biasanya fon kepala atau pembesar suara anda). Sebaik sahaja disambungkan, ia hanya satu perkara yang memanggil Mula dan Berhenti.

Perlu diperhatikan bahawa anda hanya boleh memanggil untuk memulakan () sekali pada setiap nod sumber. Ini bermakna "jeda" tidak disokong secara langsung. Sebaik sahaja sumber dihentikan, ia telah tamat tempoh. Mujurlah, nod sumber adalah objek murah, yang direka untuk dibuat dengan mudah (data audio itu sendiri, ingat, dalam penampan berasingan). Jadi, jika anda ingin meneruskan bunyi yang dijeda, anda hanya boleh membuat nod sumber baru dan Call Start () dengan parameter timestamp. AudioContext mempunyai jam dalaman yang boleh anda gunakan untuk menguruskan cap waktu.

bunyi enjin

itu untuk asas -asas, tetapi semua yang telah kami lakukan setakat ini (main balik audio mudah) boleh dilakukan dengan elemen audio lama. Untuk Penerbangan Arcade, kami perlu melakukan sesuatu yang lebih dinamik. Kami mahu padang berubah dengan kelajuan enjin.

itu sebenarnya cukup mudah dengan audio web (dan hampir mustahil tanpa itu)! Node sumber mempunyai harta kadar yang mempengaruhi kelajuan main balik. Untuk meningkatkan padang, kami hanya meningkatkan kadar main balik:

Bunyi enjin juga perlu gelung. Itu juga sangat mudah (ada harta untuknya juga):

Tetapi ada tangkapan. Banyak format audio (terutamanya audio termampat) menyimpan data audio dalam bingkai saiz tetap dan, lebih kerap daripada tidak, data audio itu sendiri tidak akan "mengisi" bingkai akhir. Ini boleh meninggalkan jurang kecil di hujung fail audio dan menghasilkan klik atau gangguan apabila fail audio tersebut mendapat gelung. Elemen audio HTML standard tidak menawarkan apa -apa jenis kawalan ke atas jurang ini dan ia boleh menjadi cabaran besar untuk permainan web yang bergantung pada audio gelung.

Untungnya, main balik audio Gapless dengan API Audio Web benar -benar mudah. Ia hanya satu perkara yang menetapkan cap waktu untuk permulaan dan akhir bahagian gelung audio (perhatikan bahawa nilai -nilai ini adalah relatif kepada sumber audio itu sendiri dan bukan jam audiocontext).

Suara Pengajar

Setakat ini, semua yang telah kami lakukan adalah dengan nod sumber (fail audio kami) dan nod output (destinasi bunyi yang kami tetapkan awal, mungkin pembesar suara anda), tetapi audionodes boleh digunakan untuk lebih banyak, termasuk manipulasi atau analisis bunyi. Dalam Arcade Penerbangan, kami menggunakan dua jenis nod (convolvernode dan waveshapernode) untuk membuat suara pengajar terdengar seperti ia datang melalui penceramah.

Convolution

dari spec w3c:

Convolution adalah proses matematik yang boleh digunakan untuk isyarat audio untuk mencapai banyak kesan linear berkualiti tinggi yang menarik. Sering kali, kesannya digunakan untuk mensimulasikan ruang akustik seperti dewan konsert, katedral, atau amfiteater luaran. Ia juga boleh digunakan untuk kesan penapis yang kompleks, seperti bunyi teredam yang datang dari dalam almari, bunyi bawah air, bunyi yang datang melalui telefon, atau bermain melalui kabinet pembesar suara vintaj. Teknik ini sangat biasa digunakan dalam gambar gerakan utama dan pengeluaran muzik dan dianggap sangat serba boleh dan berkualiti tinggi.

Convolution pada dasarnya menggabungkan dua bunyi: bunyi yang akan diproses (suara pengajar) dan bunyi yang disebut tindak balas impuls. Tanggapan impuls adalah, sememangnya, fail bunyi tetapi ia hanya berguna untuk proses konvolusi semacam ini. Anda boleh memikirkannya sebagai penapis audio macam, yang direka untuk menghasilkan kesan tertentu apabila disahkan dengan bunyi lain. Hasilnya biasanya jauh lebih realistik daripada manipulasi matematik mudah audio.

Untuk menggunakannya, kami membuat nod Convolver, memuatkan audio yang mengandungi tindak balas impuls dan kemudian sambungkan nod.

membentuk gelombang

Untuk meningkatkan penyimpangan, kami juga menggunakan nod waveshaper. Jenis nod ini membolehkan anda menggunakan gangguan matematik kepada isyarat audio untuk mencapai beberapa kesan yang benar -benar dramatik. Penyimpangan ditakrifkan sebagai fungsi lengkung. Fungsi tersebut boleh memerlukan beberapa matematik yang kompleks. Untuk

Contoh di bawah, kami meminjam yang baik dari rakan -rakan kami di MDN.

Perhatikan perbezaan yang jelas antara bentuk gelombang asal dan bentuk gelombang dengan gelombang yang digunakan untuknya.

anda boleh mencubanya secara interaktif di sini.

Contoh di atas adalah perwakilan dramatik seberapa banyak yang boleh anda lakukan dengan API Audio Web. Bukan sahaja kita membuat beberapa perubahan yang cukup dramatik terhadap bunyi yang betul dari pelayar, tetapi kita juga menganalisis bentuk gelombang dan menjadikannya elemen kanvas! API Audio Web sangat kuat dan serba boleh dan, terus terang, banyak keseronokan!

lebih banyak tangan dengan JavaScript

Microsoft mempunyai banyak pembelajaran percuma di banyak topik JavaScript sumber terbuka dan kami berada dalam misi untuk membuat lebih banyak lagi dengan Microsoft Edge. Berikut adalah beberapa yang perlu diperiksa:

Microsoft Edge Web Summit 2015 (siri lengkap apa yang diharapkan dengan pelayar baru, ciri platform web baru, dan penceramah tetamu dari komuniti)
membina // membina/dan Windows 10 (termasuk enjin JavaScript baru untuk tapak dan aplikasi)
Memajukan JavaScript tanpa melanggar web (Keynote baru -baru ini Christian Heilmann)
aplikasi web yang dihoskan dan inovasi platform web (menyelam dalam topik seperti manifold.js)
Petua Prestasi Praktikal Untuk menjadikan HTML/JavaScript anda lebih cepat (siri 7 bahagian dari reka bentuk responsif ke permainan kasual ke pengoptimuman prestasi)
Platform Web Modern Jumpstart (asas -asas HTML, CSS, dan JS)

dan beberapa alat percuma untuk memulakan: Kod Visual Studio, Percubaan Azure, dan Alat Ujian Cross-Browser-semuanya tersedia untuk Mac, Linux, atau Windows.

Artikel ini adalah sebahagian daripada siri Web Dev Tech dari Microsoft. Kami teruja untuk berkongsi Microsoft Edge dan enjin rendering EdgeHTML baru dengan anda. Dapatkan mesin maya percuma atau ujian dari jauh pada peranti Mac, iOS, Android, atau Windows anda di Modern.ie.

Soalan Lazim (Soalan Lazim) Mengenai Bunyi Dinamik Dengan API Audio Web

Bagaimana saya boleh mula menggunakan API Audio Web untuk aplikasi web saya? Ini adalah 'bekas' utama untuk projek audio anda dan biasanya dibuat pada beban halaman. Sebaik sahaja anda mempunyai contoh audiocontext, anda boleh membuat nod dalam konteks ini, sambungkannya bersama -sama untuk membentuk graf penghalaan audio, dan kemudian memanipulasi data audio. Ingat untuk memeriksa keserasian penyemak imbas kerana tidak semua pelayar menyokong sepenuhnya API Audio Web. Jenis nod audio, masing -masing dengan tujuan tertentu. Beberapa nod yang paling biasa digunakan termasuk: Gainnode untuk mengawal jumlah, oscillatornode untuk menjana bunyi, biquadfilternode untuk memohon kesan audio, dan audioBuffersourcenode untuk bermain sampel bunyi. Setiap nod boleh disambungkan ke nod lain untuk membentuk graf penghalaan audio.

Bagaimana saya boleh mengawal jumlah audio menggunakan API Audio Web?

Anda boleh mengawal jumlah audio menggunakan GainNode. Nod ini digunakan untuk mengawal kekerasan audio. Anda boleh membuat gainNode menggunakan kaedah createegain () audioContext. Sebaik sahaja dicipta, anda boleh menyesuaikan keuntungan (volum) dengan menetapkan nilai atribut keuntungan.

Bagaimana saya boleh menjana bunyi menggunakan API Audio Web? . Nod ini menghasilkan bentuk gelombang berkala. Anda boleh membuat oscillatornode menggunakan kaedah CreateOscillator () audioContext. Sebaik sahaja dibuat, anda boleh menetapkan jenis bentuk gelombang untuk menjana (sine, persegi, sawtooth, atau segitiga) dan kekerapan.

Bagaimana saya boleh menggunakan kesan audio menggunakan API Audio Web? Anda boleh menggunakan kesan audio menggunakan Biquadfilternode. Nod ini mewakili penapis pesanan kedua yang boleh digunakan untuk membuat pelbagai kesan seperti kawalan nada. Anda boleh membuat BiquadFilTernode menggunakan kaedah CreateBiquadFilter () audioContext. Sebaik sahaja dibuat, anda boleh menetapkan jenis penapis (lowpass, highpass, bandpass, dan lain -lain) dan kekerapan, q, dan keuntungan.

Bagaimana saya boleh memainkan sampel bunyi menggunakan API Audio Web?

anda boleh memainkan sampel bunyi menggunakan AudioBuffersourcenode. Node ini digunakan untuk memainkan data audio secara langsung dari audioBuffer. Anda boleh membuat audioBuffersourcenode menggunakan kaedah CreateBuffersource () AudiOcontext. Sebaik sahaja dibuat, anda boleh menetapkan penampan ke data audio yang anda mahu mainkan dan kemudian memulakan main balik menggunakan kaedah Start ().

anda boleh menyambungkan nod audio bersama -sama menggunakan kaedah Connect (). Kaedah ini digunakan untuk membentuk graf penghalaan audio. Anda boleh menyambungkan satu nod ke yang lain, atau satu nod ke beberapa nod. Data audio mengalir dari nod sumber ke nod destinasi. atribut yang disediakan oleh nod audio. Sebagai contoh, anda boleh mengubah kekerapan oscillatornode, menyesuaikan keuntungan gainnode, atau memohon penapis ke biquadfilternode. Anda juga boleh menggunakan analysernode untuk menangkap kekerapan masa nyata dan data domain masa.