API Audio Web memberikan pengaturcara JavaScript akses mudah ke pemprosesan bunyi dan sintesis. Dalam artikel ini, kami akan menyinari cahaya pada pengayun tersuai, ciri-ciri API Audio Web yang kurang dikenali yang menjadikannya mudah untuk meletakkan transformasi Fourier untuk berfungsi untuk mensintesis kesan bunyi tersendiri dalam penyemak imbas.

Takeaways Key

API Audio Web membolehkan pengaturcara JavaScript menggunakan pemprosesan bunyi dan sintesis, termasuk penggunaan pengayun tersuai dan transformasi Fourier untuk menghasilkan kesan bunyi yang unik dalam penyemak imbas.
Transformasi Fourier adalah alat matematik yang digunakan untuk menguraikan isyarat kompleks ke dalam lengkung sinusoidal diskret frekuensi tambahan, menjadikannya sesuai untuk penjanaan bunyi yang realistik. Kaedah ini digunakan oleh piawaian mampatan audio seperti mp3.
Pengayun tersuai dalam API Audio Web boleh digunakan untuk menentukan bentuk gelombang anda sendiri, menggunakan transformasi Fourier untuk menghasilkan bentuk gelombang. Ciri ini membolehkan sintesis nada kompleks seperti siren polis atau bunyi tanduk tersendiri.
sintesis bunyi menggunakan transformasi Fourier dan pengayun tersuai dalam API Audio Web lebih fleksibel daripada bekerja dengan sampel audio, yang membolehkan pemaju sepenuhnya mengautomasikan kesan tersuai dan mensintesiskan nada kompleks.

pengayun audio web

API Audio Web membolehkan anda menyusun graf elemen audio untuk menghasilkan bunyi. Pengayun adalah satu elemen seperti itu - sumber bunyi yang menghasilkan isyarat audio tulen. Anda boleh menetapkan kekerapan dan jenisnya, yang boleh menjadi sinus, persegi, gergaji atau segitiga tetapi, seperti yang akan kita lihat, terdapat juga jenis tersuai yang kuat. Pertama, mari kita cuba pengayun standard. Kami hanya menetapkan kekerapannya kepada 440 Hz, yang pemuzik akan dikenali sebagai nota A4, dan kami memasukkan pemilih jenis untuk membolehkan anda mendengar perbezaan antara bentuk gelombang sinus, persegi, gergaji dan segitiga.

Lihat pengayun Audio Web Pen oleh Seb molines (@Clafou) di Codepen.

Pengayun adat membolehkan anda menentukan bentuk gelombang anda sendiri sebagai ganti jenis terbina dalam ini, tetapi dengan sentuhan: mereka menggunakan transformasi Fourier untuk menghasilkan bentuk gelombang ini. Ini menjadikan mereka sesuai untuk penjanaan bunyi yang realistik.

Transformasi Fourier dengan Contoh

Transformasi Fourier adalah alat matematik yang digunakan oleh piawaian mampatan audio seperti MP3, di antara banyak aplikasi lain. Transformasi Fourier songsang mengurai isyarat ke dalam frekuensi konstituennya, sama seperti telinga manusia memproses getaran untuk melihat nada individu. Pada tahap yang tinggi, Transformasi Fourier mengeksploitasi fakta bahawa isyarat kompleks dapat diuraikan ke dalam lengkung sinusoidal diskret frekuensi tambahan. Ia berfungsi menggunakan jadual koefisien, masing -masing digunakan untuk pelbagai frekuensi asas. Semakin besar jadual, semakin dekat penghampiran. Tertarik? Halaman Wikipedia patut dilihat, dan termasuk animasi untuk membantu menggambarkan penguraian isyarat ke dalam lengkung sinus diskret. Tetapi bukannya menyelidiki teori, mari kita amalkan ini dengan membongkar bunyi yang berterusan yang mudah: tanduk udara.

mensintesis tanduk

Untuk artikel ini, kami akan menggunakan rakaman siren dan tanduk polis ini. Spectrograph bunyi tanduk, yang dibuat menggunakan Audacity Editor Audio Open Source, ditunjukkan di sini. Ia jelas menunjukkan beberapa garis intensiti yang berbeza -beza, semuanya jarak pada selang masa yang sama. Jika kita melihat lebih dekat, selang ini adalah kira -kira 160Hz. Fourier Transforms berfungsi dengan kekerapan asas (mari kita panggilnya f ) dan nada -nya, yang merupakan gandaan f. Sekiranya kita memilih 160Hz sebagai asas kami, garis pada 320Hz (2 x F) adalah overtone pertama kami, garis pada 480Hz (3 x F) overtone kedua kami, dan sebagainya. Kerana spectrograph menunjukkan bahawa semua baris berada pada gandaan F, pelbagai intensiti yang diperhatikan pada setiap pelbagai F adalah mencukupi untuk mewakili tiruan yang baik dari bunyi yang direkodkan. Dokumentasi API Audio Web untuk CreatePeriodicwave, yang mewujudkan bentuk gelombang tersuai dari pekali Fourier, memberitahu kami ini:

The real parameter represents an array of cosine terms (traditionally the A terms). In audio terminology, the first element (index 0) is the DC-offset of the periodic waveform and is usually set to zero. The second element (index 1) represents the fundamental frequency. The third element represents the first overtone, and so on.

Terdapat juga imag Parameter yang boleh kita abaikan sebagai fasa tidak relevan untuk contoh ini. Oleh itu, mari kita buat pelbagai pekali ini (menganggarkan mereka menjadi 0.4, 0.4, 1, 1, 1, 0.3, 0.7, 0.6, 0.5, 0.9, 0.8 berdasarkan kecerahan garis pada spektrograph bermula di bahagian bawah). Kami kemudian membuat pengayun tersuai dari jadual ini dan mensintesis bunyi yang dihasilkan.

<span>var audioContext = new AudioContext();
</span><span>var osc = audioContext.createOscillator();
</span>
<span>var real = new Float32Array([0,0.4,0.4,1,1,1,0.3,0.7,0.6,0.5,0.9,0.8]);
</span>
<span>var imag = new Float32Array(real.length);
</span><span>var hornTable = audioContext.createPeriodicWave(real, imag);
</span>
osc <span>= audioContext.createOscillator();
</span>osc<span>.setPeriodicWave(hornTable);
</span>osc<span>.frequency.value = 160;
</span>osc<span>.connect(audioContext.destination);
</span>osc<span>.start(0);</span>

lihat pena adat pena: tanduk oleh sebi molin (@clafou) pada codepen.

Tidak betul -betul bunyi yang menenangkan, tetapi sangat dekat dengan bunyi yang direkodkan. Sudah tentu, sintesis bunyi jauh melebihi spektrum sahaja -khususnya, sampul surat adalah aspek yang sama pentingnya timbre.

dari data isyarat ke jadual Fourier

Adalah luar biasa untuk mencipta pekali Fourier dengan tangan seperti yang kita lakukan (dan beberapa bunyi semudah bunyi tanduk kita yang hanya terdiri daripada partial harmonik, iaitu gandaan F). Biasanya, jadual Fourier dikira dengan memberi makan data isyarat sebenar ke dalam algoritma FFT (Fast Fourier Transform) songsang. Anda boleh menemui koefisien Fourier untuk pemilihan bunyi dalam repositori kromium, di antaranya adalah bunyi organ yang dimainkan di bawah:

Lihat pengayun adat pen: organ oleh sebi molin (@clafou) pada codepen.

Perpustakaan Sumber Terbuka DSP.JS membolehkan anda mengira koefisien Fourier seperti data sampel anda sendiri. Kami sekarang akan menunjukkan ini untuk menghasilkan bentuk gelombang tertentu.

pengayun frekuensi rendah: nada siren polis

Siren polis AS berayun antara frekuensi yang rendah dan tinggi. Kita boleh mencapai ini menggunakan API Audio Web dengan menghubungkan dua pengayun. Yang pertama (pengayun frekuensi rendah, atau LFO) memodulasi kekerapan kedua yang menghasilkan gelombang bunyi yang boleh didengar. Untuk membongkar perkara yang sebenar, seperti dahulu, kita mengambil spektrum bunyi siren polis dari rakaman yang sama. Daripada garis mendatar, kita kini melihat bentuk gelombang berbentuk sirip hiu yang mewakili modulasi nada berirama siren. Pengayun standard hanya menyokong bentuk gelombang sinus, persegi, gergaji dan segitiga berbentuk segitiga, jadi kita tidak boleh bergantung kepada mereka untuk meniru bentuk gelombang khusus ini. Tetapi kita boleh membuat pengayun tersuai sekali lagi. Pertama, kita memerlukan pelbagai nilai yang mewakili lengkung yang dikehendaki. Fungsi berikut menghasilkan nilai -nilai sedemikian, yang kita masuk ke dalam array yang dipanggil nilai sharkfin.

Lihat fungsi pena bentuk pena untuk modulasi nada siren oleh sebi molin (@clafou) pada codepen.

Seterusnya, kami menggunakan dsp.js untuk mengira pekali Fourier dari data isyarat ini. Kami memperoleh array sebenar dan imag yang kami gunakan untuk memulakan LFO kami.

The real parameter represents an array of cosine terms (traditionally the A terms). In audio terminology, the first element (index 0) is the DC-offset of the periodic waveform and is usually set to zero. The second element (index 1) represents the fundamental frequency. The third element represents the first overtone, and so on.

Akhirnya, kami membuat pengayun kedua dan menyambungkan LFO ke kekerapannya, melalui nod keuntungan untuk menguatkan output LFO. Spectrograph kami menunjukkan bahawa bentuk gelombang berlangsung sekitar 380ms, jadi kami menetapkan kekerapan LFO kepada 1/0.380. Ia juga menunjukkan kepada kita bahawa nada asas siren berkisar dari paras kira -kira 750Hz ke tahap tinggi kira -kira 1650Hz (median 1200Hz ± 450Hz), jadi kami menetapkan kekerapan pengayun kepada 1200 dan keuntungan LFO hingga 450. Kita kini boleh memulakan kedua -dua pengayun untuk mendengar siren polis kita.

<span>var audioContext = new AudioContext();
</span><span>var osc = audioContext.createOscillator();
</span>
<span>var real = new Float32Array([0,0.4,0.4,1,1,1,0.3,0.7,0.6,0.5,0.9,0.8]);
</span>
<span>var imag = new Float32Array(real.length);
</span><span>var hornTable = audioContext.createPeriodicWave(real, imag);
</span>
osc <span>= audioContext.createOscillator();
</span>osc<span>.setPeriodicWave(hornTable);
</span>osc<span>.frequency.value = 160;
</span>osc<span>.connect(audioContext.destination);
</span>osc<span>.start(0);</span>

lihat pen siren oleh sebi molin (@clafou) pada codepen.

Untuk lebih banyak realisme, kami juga boleh menggunakan bentuk gelombang tersuai kepada pengayun kedua, seperti yang telah kami tunjukkan dengan bunyi tanduk.

Kesimpulan

Dengan penggunaan Fourier Transforms mereka, pengayun tersuai memberikan pemaju audio web cara mudah untuk mensintesis nada kompleks dan untuk mengautomasikan sepenuhnya kesan tersuai seperti bentuk gelombang siren yang telah kami tunjukkan. Sintesis bunyi jauh lebih fleksibel daripada bekerja dengan sampel audio. Sebagai contoh, mudah untuk membina kesan siren ini untuk menambah lebih banyak kesan, seperti yang saya lakukan untuk menambah peralihan Doppler dalam aplikasi mudah alih ini. Spec "Bolehkah Saya Menggunakan" menunjukkan bahawa API Audio Web menikmati sokongan penyemak imbas yang luas, kecuali IE. Tidak semua penyemak imbas terkini dengan standard W3C terkini, tetapi patch monyet tersedia untuk membantu menulis kod silang penyemak imbas. Android L akan menambah sokongan Audio Audio Web ke WebView, yang telah dilakukan oleh iOS sejak versi 6. Sekarang adalah masa yang tepat untuk mula bereksperimen!

Soalan Lazim (Soalan Lazim) Mengenai Menggunakan Transformasi Fourier Dengan Web Audio API

Apakah API Audio Web dan bagaimana ia berfungsi? Ia membolehkan pemaju memilih sumber audio, menambah kesan kepada audio, membuat visualisasi audio, menggunakan kesan spatial (seperti panning) dan banyak lagi. Ia berfungsi dengan mewujudkan konteks audio dari mana pelbagai nod audio boleh dibuat dan dihubungkan bersama untuk membentuk graf penghalaan audio. Setiap nod melakukan fungsi audio tertentu seperti menghasilkan bunyi, perubahan kelantangan, atau menggunakan kesan audio.

Bagaimanakah transformasi Fourier berfungsi dalam API Audio Web? Dalam konteks API Audio Web, ia digunakan untuk menganalisis frekuensi yang terdapat dalam isyarat audio. Ini dilakukan menggunakan antara muka Analysernode, yang menyediakan maklumat analisis kekerapan masa nyata dan masa domain. Transformasi Fourier digunakan untuk menukar data domain masa ke dalam data domain frekuensi, yang kemudiannya boleh digunakan untuk pelbagai tujuan seperti membuat visualisasi audio. ??>

Harta FFTSize dalam API Audio Web digunakan untuk menetapkan saiz transformasi Fourier Fast (FFT) untuk digunakan untuk menentukan domain frekuensi. Ia adalah kuasa dua nilai yang menentukan bilangan sampel yang akan digunakan semasa melakukan transformasi Fourier. Semakin tinggi nilai, tong kekerapan lebih banyak ada dan lebih terperinci data kekerapan akan. Walau bagaimanapun, nilai yang lebih tinggi juga bermakna lebih banyak kuasa pengiraan diperlukan.

Bagaimana saya boleh membuat visualisasi audio menggunakan API audio web?

dan kemudian menggunakan data itu untuk membuat representasi visual. Ini biasanya dilakukan menggunakan antara muka Analysernode, yang menyediakan maklumat analisis kekerapan masa nyata dan masa domain. Data ini kemudiannya boleh digunakan untuk membuat visualisasi seperti graf gelombang atau graf spektrum frekuensi. Kaedah khusus untuk membuat visualisasi bergantung kepada jenis visualisasi yang anda ingin buat dan perpustakaan atau alat yang anda gunakan untuk membuat grafik. ? Ini termasuk Gainnode untuk menukar jumlah, Biquadfilternode untuk memohon pelbagai kesan penapis, Convolvernode untuk menerapkan kesan konvolusi seperti reverb, dan banyak lagi. Nod ini boleh dibuat dari konteks audio dan kemudian disambungkan dalam graf penghalaan audio untuk menggunakan kesan yang dikehendaki ke audio. API Audio Web biasanya digunakan untuk pelbagai tujuan dalam aplikasi web. Ini termasuk bermain dan mengawal audio, menambah kesan bunyi ke permainan, mewujudkan visualisasi audio, menggunakan kesan spatial untuk audio untuk aplikasi realiti maya, dan banyak lagi. Ia menyediakan cara yang kuat dan fleksibel untuk bekerja dengan audio dalam aplikasi web.

Bagaimana saya boleh mengawal main balik audio menggunakan API Audio Web? Ini termasuk keupayaan untuk memulakan dan menghentikan audio, menyesuaikan kadar main balik, dan mencari bahagian -bahagian yang berbeza dari audio. Ini biasanya dilakukan menggunakan antara muka audioBuffersourcenode, yang mewakili sumber audio yang terdiri daripada data audio dalam memori. Kuat dan fleksibel, ia mempunyai beberapa batasan. Sebagai contoh, ia memerlukan pelayar moden yang menyokong API, dan ia boleh menjadi kompleks untuk digunakan untuk tugas pemprosesan audio yang lebih maju. Di samping itu, kerana ia adalah API peringkat tinggi, ia mungkin tidak memberikan tahap kawalan yang diperlukan untuk aplikasi tertentu berbanding dengan API peringkat rendah.

Ya, API Audio Web boleh digunakan untuk merakam audio, walaupun ini bukan tujuan utamanya. Ini biasanya dilakukan menggunakan antara muka MediaStreMeAudioSourcenode, yang mewakili sumber audio yang terdiri daripada aliran media (seperti dari mikrofon atau peranti input audio lain). ??> Terdapat banyak sumber yang tersedia untuk mempelajari lebih lanjut mengenai API Audio Web. Rangkaian Pemaju Mozilla (MDN) menyediakan dokumentasi komprehensif mengenai API, termasuk panduan dan tutorial. Terdapat juga banyak tutorial dan kursus dalam talian yang terdapat di laman web seperti Codecademy, Udemy, dan Coursera. Di samping itu, terdapat beberapa buku yang tersedia mengenai subjek ini, seperti "API Audio Web" oleh Boris Smus.

Atas ialah kandungan terperinci Menggunakan Transformasi Fourier dengan API Audio Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!