Selama beberapa bulan terakhir, Web Audio API WebKit telah muncul sebagai platform yang menarik untuk game dan aplikasi audio di web. Saat developer memahaminya, saya mendengar pertanyaan serupa muncul berulang kali. Pembaruan cepat ini adalah upaya untuk menjawab beberapa pertanyaan yang paling sering diajukan agar pengalaman Anda dengan Web Audio API menjadi lebih menyenangkan.
T: Tolong, saya tidak bisa mengeluarkan suara!
J: Jika Anda baru menggunakan Web Audio API, lihat tutorial memulai, atau resep Eric untuk memutar audio berdasarkan interaksi pengguna.
T: Berapa banyak Audio Context 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 memengaruhi performa.
T: Saya memiliki AudioBufferSourceNode, yang baru saja saya putar kembali dengan noteOn(), dan saya ingin memutarnya lagi, tetapi noteOn() tidak melakukan apa pun. Tolong bantu saya.
J: Setelah selesai diputar, node sumber tidak dapat diputar lagi. Untuk memutar kembali buffer pokok, 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 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 kembali suara, mengapa Anda perlu membuat node sumber baru setiap saat?
J: Ide dari arsitektur ini adalah memisahkan aset audio dari status pemutaran. Dengan mengambil analogi pemutar piringan hitam, buffer dianalogikan dengan piringan hitam dan sumber dengan kepala pemutar. Karena banyak aplikasi melibatkan beberapa versi buffer yang sama yang diputar secara bersamaan, pola ini sangat penting.
T: Bagaimana cara memproses suara dari tag audio dan video?
J: MediaElementAudioSourceNode sedang dalam pengembangan. Jika tersedia, fungsinya akan kurang lebih 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, 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. Fitur 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 thread UI terkunci dan UI saya menjadi tidak responsif. Bantu!**
J: Gunakan API decodeAudioData untuk pemuatan asinkron guna menghindari pemblokiran 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 masuk ke latar belakang, suara menjadi aneh.
J: Hal ini mungkin karena Anda menggunakan setTimeouts, yang berperilaku berbeda jika halaman berada di latar belakang. Pada masa mendatang, Web Audio API akan dapat melakukan panggilan balik pada waktu tertentu menggunakan timer internal web audio (atribut context.currentTime). Untuk mengetahui informasi selengkapnya, lihat permintaan fitur ini.
Secara umum, sebaiknya hentikan pemutaran saat aplikasi Anda masuk ke latar belakang. Anda dapat mendeteksi saat halaman masuk ke latar belakang menggunakan Page Visibility API.
T: Bagaimana cara mengubah nada suara menggunakan Web Audio API?
J: Ubah 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 penggeseran nada yang mudah dalam komunitas audio. Teknik yang sudah dikenal akan menghasilkan artefak, terutama jika pergeseran nada sangat 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 reverberan.
Meskipun tidak ada node bawaan untuk melakukan teknik ini, Anda dapat melakukannya dengan JavaScriptAudioNode. Cuplikan kode ini dapat berfungsi sebagai titik awal.
T: Bagaimana cara membuat AudioContext pada frekuensi sampel pilihan saya?
J: Saat ini, fitur ini belum didukung, tetapi kami sedang mempertimbangkannya. Lihat permintaan fitur ini.
Jika ada pertanyaan lainnya, jangan ragu untuk mengajukannya di StackOverflow menggunakan tag web-audio.