API Audio Web: Tambahkan bunyi mesra jalur lebar ke laman web anda

Membuka Kekuatan Audio Pelayar: Panduan ke Web Audio API

API Audio Web memberi kuasa kepada pemaju untuk mengintegrasikan pemprosesan audio yang canggih terus ke laman web menggunakan JavaScript, menghapuskan keperluan plugin. Ini amat bermanfaat untuk aplikasi web yang sering diakses melalui rangkaian jalur lebar rendah, kerana ia membolehkan sintesis bunyi menggunakan pelbagai bentuk gelombang, menghasilkan saiz fail yang lebih kecil berbanding dengan audio pra-rakaman.

Sumber: mdn

Ciri -ciri utama dan sokongan penyemak imbas:

API Audio Web menikmati sokongan luas di seluruh pelayar utama termasuk Chrome, Edge, Firefox, Opera, dan Safari (walaupun sokongan Safari adalah eksperimen pada masa penulisan dan mungkin memerlukan awalan webkit). Inti API adalah pembina

, menyediakan kaedah untuk membuat dan menyambungkan pelbagai AudioContext. Nod ini, yang sesuai dengan antara muka AudioNodes, boleh dirantai bersama menggunakan kaedah AudioNode untuk membina graf audio kompleks. connect()

Bolehkah saya menggunakan audio-api? (semak keserasian penyemak imbas di sini)

Membangun graf audio:

jatuh ke dalam tiga kategori: AudioNodes

• nod sumber: menjana atau input audio (mis., fail, bunyi disintesis). MP3
• Kesan nod: Ubah suai isyarat audio (mis., GainNode nod destinasi: Panning output audio ke peranti pengguna (diakses melalui
).
• Contoh berikut menunjukkan bermain mp3 menggunakan AudioContext.destination:

Demo Codepen: Memainkan MP3 dengan Web Audio API AudioBufferSourceNode

(ganti

dengan id codepen sebenar) your-codepen-id-here sintesis bunyi dengan oscillatornode:

Di luar audio pra-rakaman, membolehkan penjanaan bunyi masa nyata berdasarkan bentuk gelombang yang ditentukan. Jenis bentuk gelombang termasuk:

OscillatorNode: Lancar, bunyi bersiul.

• : tajam, sering digunakan dalam reka bentuk bunyi permainan retro. 'sine'
• : campuran sinus dan gelombang persegi. 'square'
• : kuat, bunyi berdengung. 'triangle'
• Keupayaan ini mengurangkan saiz fail, penting untuk mengekalkan prestasi aplikasi merentasi jalur lebar yang berbeza -beza (2g hingga 4g). Suara yang disintesis jauh lebih kecil daripada fail audio setanding. Sebagai contoh, contoh 'sawtooth' yang mudah dikodkan sebagai MP3 mungkin hanya 10kb, memuat lebih cepat pada sambungan yang lebih perlahan.

codepen demo: menjana bunyi dengan oscillatornode (ganti your-codepen-id-here dengan id codepen sebenar)

Menambah bunyi pemberitahuan: mari kita membina bunyi pemberitahuan menggunakan

dan

. OscillatorNode mengawal amplitud audio (kelantangan). GainNode (antara muka yang terdedah oleh GainNode dan AudioParam) membolehkan penetapan dan penjadualan perubahan secara beransur-ansur dalam nilai-nilai seperti kekerapan dan keuntungan, mewujudkan lebih banyak kesan bunyi semulajadi. Menggunakan GainNode, kita boleh lancar memudar masuk dan keluar bunyi. OscillatorNode exponentialRampToValueAtTime

codepen demo: Pemberitahuan bunyi dengan oscillatornode

(ganti dengan id codepen sebenar) your-codepen-id-here

Nota penting pada penggunaan semula Audionode:

adalah murah untuk dicipta. Untuk memainkan semula bunyi, buat semula nod dan bukannya cuba memulakannya semula. AudioNodes

Eksplorasi lanjut:

Untuk menyelam lebih mendalam ke dalam API Audio Web, pertimbangkan siri screencast premium SitePoint, "

anda belum mendengar apa -apa lagi!

"

Soalan Lazim (Soalan Lazim):
(bahagian Soalan Lazim dari input asal telah ditinggalkan di sini untuk menjimatkan ruang, tetapi sangat disyorkan untuk memasukkannya dalam output akhir untuk kesempurnaan. Maklumat yang disediakan telah diliputi dalam teks yang disemak di atas.)

Output yang disemak ini mengekalkan kandungan asal sambil meningkatkan kebolehbacaan dan aliran. Ingatlah untuk menggantikan pautan codepen tempat letak dengan pautan sebenar ke demo.

Atas ialah kandungan terperinci API Audio Web: Tambahkan bunyi mesra jalur lebar ke laman web anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!