Selama beberapa bulan terakhir, Web Audio API WebKit telah muncul sebagai platform yang menarik untuk game dan aplikasi audio di web. Saat developer membiasakan diri dengan aplikasi ini, saya akan mendengar pertanyaan serupa berulang kali. Pembaruan singkat ini adalah upaya untuk menjawab beberapa pertanyaan umum (FAQ) untuk membuat pengalaman Anda menggunakan Web Audio API lebih menyenangkan.
T: Tolong, saya tidak bisa mengeluarkan suara.
J: Jika Anda baru menggunakan Web Audio API, lihat tutorial memulai, atau resep Erik untuk memutar audio berdasarkan interaksi pengguna.
T. Berapa banyak Konteks Audio yang harus saya miliki?
J: Umumnya, Anda harus menyertakan satu AudioContext per halaman, dan satu konteks audio dapat mendukung banyak node yang terhubung dengannya. Meskipun Anda dapat menyertakan beberapa AudioContext di satu halaman, hal ini dapat menghasilkan hit performa.
T: Saya memiliki AudioBufferSourceNode, yang baru saja saya putar dengan noteOn(), dan saya ingin memutarnya lagi, tetapi noteOn() tidak melakukan apa-apa. Tolong bantuannya.
J: Setelah node sumber selesai melakukan pemutaran, node sumber tidak dapat memutar ulang. Untuk memutar kembali buffer dasar, Anda harus membuat AudioBufferSourceNode baru dan memanggil noteOn().
Meskipun membuat ulang node sumber mungkin terasa tidak efisien, node sumber sangat dioptimalkan untuk pola ini. Selain itu, jika menyimpan handle ke AudioBuffer, Anda tidak perlu membuat permintaan lain ke aset untuk memutar suara yang sama lagi. Jika Anda perlu mengulangi pola ini, enkapsulasi pemutaran dengan fungsi bantuan sederhana seperti playSound(buffer).
T: Saat memutar suara, mengapa Anda perlu membuat node sumber baru setiap saat?
J: Gagasan dari arsitektur ini adalah untuk memisahkan aset audio dari status pemutaran. Menggunakan analogi pemutar rekaman, buffer setara dengan kumpulan data dan sumber pada pemutar rekaman. Karena banyak aplikasi melibatkan beberapa versi buffer yang sama yang diputar secara bersamaan, pola ini penting.
T: Bagaimana cara memproses suara dari tag audio dan video?
J: MediaElementAudioSourceNode sedang dalam proses! Jika tersedia, parameter ini akan bekerja kurang lebih seperti berikut (menambahkan efek filter ke sampel yang diputar melalui tag audio):
<audio src="sounds/sample.wav" controls>
var audioElement = document.querySelector('audio');
var mediaSourceNode = context.createMediaElementSource(audioElement);
mediaSourceNode.connect(filter);
filter.connect(context.destination);
Fitur ini dilacak di crbug ini. Perhatikan bahwa dalam penyiapan ini, Anda tidak perlu memanggil mediaSourceNode.noteOn() karena tag audio akan mengontrol pemutaran.
T: Kapan saya dapat mendengar suara dari Mikrofon?
J: Bagian input audio dari file ini akan diterapkan sebagai bagian dari WebRTC menggunakan getUserMedia, dan tersedia sebagai node sumber khusus di Web Audio API. Fungsi ini akan berfungsi bersama dengan createMediaElementSource.
T: Bagaimana cara memeriksa kapan AudioSourceNode telah selesai diputar?
J: Saat ini Anda harus menggunakan timer JavaScript karena Web Audio API tidak mendukung fungsi ini. Cuplikan berikut dari tutorial Memulai Web Audio API adalah contoh penerapannya:
// Assume source and buffer are previously defined.
source.noteOn(0);
var timer = setTimeout(function() {
console.log('playback finished');
}, buffer.duration * 1000);
Ada bug terbuka untuk membuat Web Audio API mengimplementasikan callback yang lebih akurat.
T: Suara pemuatan menyebabkan seluruh UI thread terkunci dan UI saya menjadi tidak responsif. Tolong!**
J: Menggunakan decodeAudioData API untuk pemuatan asinkron agar tidak memblokir thread utama. Lihat contoh ini.
T: Dapatkah Web Audio API digunakan untuk memproses suara lebih cepat daripada real-time?
J: Ya, sebuah solusi sedang dikerjakan. Nantikan kabar berikutnya!
T: Saya telah membuat aplikasi Web Audio API yang keren, tetapi setiap kali tab yang dijalankannya muncul di latar belakang, semuanya terdengar aneh!
J: Hal ini mungkin karena Anda menggunakan setTimeouts, yang berperilaku berbeda jika halaman berada di latar belakang. Di masa mendatang, Web Audio API akan dapat melakukan callback pada waktu tertentu menggunakan timer internal audio web (atribut context.currentTime). Untuk informasi selengkapnya, lihat permintaan fitur ini.
Secara umum, sebaiknya hentikan pemutaran saat aplikasi Anda beralih ke latar belakang. Anda dapat mendeteksi kapan halaman beralih ke latar belakang menggunakan Page Visibility API.
T: Bagaimana cara mengubah tinggi nada suara menggunakan Web Audio API?
J: Mengubah playbackRate pada node sumber.
T: Dapatkah saya mengubah nada tanpa mengubah kecepatan?
J: Web Audio API dapat memiliki PitchNode dalam konteks audio, tetapi hal ini sulit diterapkan. Hal ini dikarenakan tidak ada algoritma pergeseran nada yang mudah dipahami dalam komunitas audio. Teknik yang dikenal dapat membuat artefak, terutama dalam kasus ketika pergeseran nada besar. Ada dua jenis pendekatan untuk mengatasi masalah ini:
- Algoritma domain waktu, yang menyebabkan artefak gema segmen berulang.
- Teknik domain frekuensi, yang menyebabkan artefak suara gaung.
Meskipun tidak ada node native untuk melakukan teknik ini, Anda dapat melakukannya dengan JavaScriptAudioNode. Cuplikan kode ini dapat berfungsi sebagai titik awal.
T: Bagaimana cara membuat AudioContext dengan frekuensi sampel yang saya pilih?
J: Saat ini tidak ada dukungan untuk hal ini, tetapi kami sedang memeriksanya. Lihat permintaan fitur ini.
Jika ada pertanyaan lain, jangan ragu untuk mengajukannya di StackOverflow menggunakan tag web-audio.