Selama beberapa bulan terakhir, Web Audio API WebKit telah muncul sebagai platform yang menarik untuk aplikasi game dan audio di web. Saat developer memahaminya, saya mendengar pertanyaan serupa berulang kali menghanyutkan. Pembaruan cepat ini berupaya menjawab beberapa pertanyaan umum (FAQ) agar pengalaman Anda dengan Web Audio API lebih menyenangkan.
T: Tolong, saya tidak bisa bersuara.
J: Jika Anda baru menggunakan Web Audio API, lihat tutorial memulai, atau urutan langkah 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 dengannya. Meskipun Anda dapat menyertakan beberapa AudioContexts pada satu halaman, hal ini dapat menyebabkan hit performa.
T: Saya memiliki AudioBufferSourceNode yang baru saja diputar dengan noteOn(), dan saya ingin memutarnya lagi, tetapi noteOn() tidak melakukan apa pun. Tolong bantu saya.
J: Setelah node sumber selesai diputar, node sumber tidak dapat lagi memutarnya. Untuk memutar kembali buffering yang mendasarinya, 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 Anda mempertahankan handle untuk 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 harus membuat node sumber baru setiap saat?
J: Ide arsitektur ini adalah untuk memisahkan aset audio dari status pemutaran. Dengan analogi pemutar rekaman, buffering serupa dengan kumpulan data dan sumber ke titik pemutaran. Karena banyak aplikasi melibatkan beberapa versi buffer yang sama yang diputar secara bersamaan, pola ini bersifat penting.
T: Bagaimana cara memproses suara dari tag audio dan video?
J: MediaElementAudioSourceNode sedang dalam proses. Jika tersedia, filter tersebut 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 dalam crbug ini. Perhatikan bahwa dalam penyiapan ini, Anda tidak perlu memanggil mediaSourceNode.noteOn(), tag audio akan mengontrol pemutaran.
T: Kapan saya bisa mendapatkan suara dari Mikrofon?
J: Bagian input audio ini akan diterapkan sebagai bagian dari WebRTC menggunakan getUserMedia, dan tersedia sebagai node sumber khusus di Web Audio API. Fungsi ini akan berfungsi bersama createMediaElementSource.
T: Bagaimana cara memeriksa apakah 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);
Terdapat 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: Menggunakan decodeAudioData API untuk pemuatan asinkron agar tidak memblokir thread utama. Lihat contoh ini.
T: Apakah Web Audio API dapat digunakan untuk memproses suara lebih cepat daripada realtime?
J: Ya, solusi sedang dikerjakan. Nantikan kabar berikutnya!
T: Saya telah membuat aplikasi Web Audio API yang mengagumkan, namun setiap kali tab yang dijalankannya berpindah di 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 beralih ke latar belakang. Anda dapat mendeteksi saat halaman beralih ke latar belakang menggunakan Page Visibility API.
T: Bagaimana cara mengubah tinggi 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 sulit diterapkan. Hal ini dikarenakan tidak ada algoritma perubahan nada yang jelas dalam komunitas audio. Teknik yang diketahui akan menghasilkan artefak, terutama dalam kasus perubahan pitch yang 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 gema.
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.