Selama beberapa bulan terakhir, Web Audio API WebKit telah muncul sebagai platform yang menarik untuk game dan aplikasi audio di web. Saat developer mulai memahaminya, saya mendengar pertanyaan serupa muncul berulang kali. Pembaruan singkat ini adalah upaya untuk menjawab beberapa pertanyaan yang lebih sering diajukan untuk membuat pengalaman Anda dengan Web Audio API menjadi lebih menyenangkan.
T: Tolong, saya tidak bisa membuat suara.
J: Jika Anda baru menggunakan Web Audio API, lihat tutorial memulai, atau resep Eric 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 ke konteks tersebut. Meskipun Anda dapat menyertakan beberapa AudioContext di satu halaman, hal ini dapat menyebabkan penurunan performa.
T: Saya memiliki AudioBufferSourceNode, yang baru saja saya putar dengan noteOn(), dan saya ingin memutarnya lagi, tetapi noteOn() tidak melakukan apa pun. Tolong bantu saya.
A: Setelah selesai diputar, node sumber tidak dapat diputar lagi. Untuk memutar ulang buffer yang mendasarinya, Anda harus membuat AudioBufferSourceNode baru dan memanggil noteOn().
Meskipun membuat ulang node sumber mungkin terasa tidak efisien, node sumber dioptimalkan secara maksimal untuk pola ini. Selain itu, jika Anda menyimpan handle ke AudioBuffer, Anda tidak perlu membuat permintaan lain ke aset untuk memutar suara yang sama lagi. Jika Anda perlu mengulangi pola ini, gabungkan pemutaran dengan fungsi bantuan sederhana seperti playSound(buffer).
T: Saat memutar suara, mengapa Anda perlu membuat node sumber baru setiap saat?
A: Ide arsitektur ini adalah untuk memisahkan aset audio dari status pemutaran. Dengan analogi pemutar piringan hitam, buffering analog dengan rekaman dan sumber dengan head pemutar. Karena banyak aplikasi melibatkan beberapa versi buffering yang sama yang diputar secara bersamaan, pola ini sangat penting.
T: Bagaimana cara memproses suara dari tag audio dan video?
A: MediaElementAudioSourceNode sedang dalam proses. Jika tersedia, fitur ini akan berfungsi kira-kira sebagai 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(), tag audio mengontrol pemutaran.
T: Kapan saya bisa mendapatkan suara dari Mikrofon?
J: Bagian input audio ini akan diimplementasikan sebagai bagian dari WebRTC menggunakan getUserMedia, dan tersedia sebagai node sumber khusus di Web Audio API. Peristiwa ini akan berfungsi bersama dengan createMediaElementSource.
T: Bagaimana cara memeriksa kapan AudioSourceNode 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 menerapkan callback yang lebih akurat.
T: Memuat suara menyebabkan seluruh UI thread terkunci dan UI saya menjadi tidak responsif. Tolong!**
A: Gunakan 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 waktu sebenarnya?
J: Ya, solusi sedang diupayakan. Nantikan kabar berikutnya!
T: Saya telah membuat aplikasi Web Audio API yang luar biasa, tetapi setiap kali tab tempat aplikasi berjalan beralih ke latar belakang, suara menjadi 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 saat halaman beralih ke latar belakang menggunakan Page Visibility API.
T: Bagaimana cara mengubah nada suara menggunakan Web Audio API?
A: 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 karena tidak ada algoritma pergeseran nada yang sederhana di komunitas audio. Teknik yang diketahui akan membuat artefak, terutama jika pergeseran nadanya besar. Ada dua jenis pendekatan untuk mengatasi masalah ini:
- Algoritme domain waktu, yang menyebabkan artefak gema segmen berulang.
- Teknik domain frekuensi, yang menyebabkan artefak suara yang bergema.
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 menyelidikinya. Lihat permintaan fitur ini.
Jika ada pertanyaan tambahan, jangan ragu untuk mengajukannya di StackOverflow menggunakan tag web-audio.