Isi
- Audio HTML
- API Audio Web
- Cara menggunakan API Audio Web
- 01. Inisialisasi Konteks Audio
- 02. Hubungkan Grafik Audio
- 03. Memuat suara
- 04. Memutar suara
- 05. Menyatukan semuanya
- Web Audio API AnalyserNode
- Temukan lebih lanjut di API Audio Web
Semakin banyak desainer web yang mengeksplorasi kekuatan suara sebagai alat desain web (pelajari lebih lanjut tentang bagaimana desain suara mengubah UX di sini). Antara audio HTML dan API Audio Web, mudah untuk mulai menambahkan suara ke proyek Anda. Itu audio> elemen memungkinkan Anda menyertakan audio bebas plugin di situs Anda, tetapi masih terbatas.
Untuk kontrol suara maksimum, API Audio Web memungkinkan Anda menghasilkan suara, memutar suara yang sudah ada (menyimpan file suara Anda dengan aman di penyimpanan cloud), membuat efek, dan banyak lagi. Dalam artikel ini, kita akan melihat lebih dekat cara kerja masing-masing, dan menjelaskan cara menggunakannya untuk menambahkan suara ke proyek Anda.
Untuk API yang lebih menakjubkan untuk dijelajahi, lihat panduan kami untuk API JavaScript, API HTML, dan API Google terbaik kami. Atau, jika Anda menginginkan proses yang lebih sederhana, gunakan alat pembuat situs web dan penyedia hosting web yang sempurna.
Audio HTML
HTML audio> tag memungkinkan Anda menyematkan musik di situs web dan aplikasi. Mirip dengan video> tag, Anda dapat menentukan file sumber, kontrol dan beberapa opsi lainnya. Ini memungkinkan Anda dengan mudah menambahkan audio ke halaman Anda dengan kode minimal. Anda kemudian dapat menargetkan elemen melalui JavaScript untuk memberikan kontrol lebih lanjut. Ini mendukung MP3, WAV, OGG dan format lainnya, dengan MP3 yang didukung secara universal di seluruh browser dan perangkat modern.
Mari kita lihat contoh sederhana penggunaan audio> menandai.
audio autoplay = "autoplay" kontrol = "kontrol"> sumber src = "music.ogg" /> sumber src = "music.mp3" /> / audio>
Beberapa atribut praktis yang spesifik untuk elemen ini meliputi:
- Putar otomatis - Untuk memungkinkan audio diputar setelah siap
- Kontrol - Kontrol untuk file audio akan disertakan di halaman
- Loop - Jika yang ini disertakan, audio akan berputar dan diputar lagi setelah selesai
- Pramuat - Pramuat audio jika memungkinkan agar siap diputar
Namun, ini juga memiliki beberapa batasan. Ada batas rendah untuk jumlah suara yang dapat diputar secara bersamaan, tidak ada kontrol waktu yang tepat, tidak mungkin untuk menerapkan efek waktu nyata, dan tidak ada cara untuk menganalisis suara. Di sinilah API Audio Web dapat berperan.
API Audio Web
API Audio Web adalah sistem yang kuat untuk mengontrol audio di web. Ini dapat digunakan untuk mengaktifkan sumber audio, menambahkan efek, membuat visualisasi audio dan banyak lagi.
API ini mengelola operasi di dalam Konteks Audio. Operasi audio dilakukan dengan node audio, yang dihubungkan bersama untuk membentuk Grafik Perutean Audio. Berbagai sumber didukung dalam satu Konteks Audio. Desain modular ini sangat fleksibel, memungkinkan terciptanya desain audio yang kompleks.
Node audio dihubungkan ke rantai dan web sederhana dengan input dan outputnya. Mereka biasanya dimulai dengan satu atau lebih sumber. Keluaran node dapat dihubungkan ke masukan orang lain yang membuat rantai atau jaringan aliran audio. Efek yang umum adalah mengalikan audio dengan nilai untuk membuatnya lebih nyaring atau lebih pelan menggunakan GainNode.
Setelah suara terpengaruh dan siap untuk dikeluarkan, itu dapat dihubungkan ke input AudioContext.destination, yang mengirimkan suara ke speaker. Perhatikan bahwa koneksi terakhir ini hanya diperlukan jika Anda membutuhkan audio untuk didengarkan.
Aliran umum untuk Audio Web dapat terlihat seperti ini:
- Buat konteks audio
- Buat sumber di dalam konteks (mis. audio>, osilator, aliran)
- Buat node efek (misalnya reverb, flanger, panner, kompresi)
- Pilih tujuan untuk audio (misalnya speaker)
- Hubungkan sumber ke efek, dan efek ke tujuan
Cara menggunakan API Audio Web
Mari kita lihat bagaimana Anda dapat menggunakan API Audio Web dalam sebuah proyek. Dalam contoh ini, Anda akan memuat dan memutar file suara menggunakan API.
01. Inisialisasi Konteks Audio
Untuk memulai kita perlu mengatur Konteks Audio kita, kanvas audio untuk suara kita. Metode ini memastikan dukungan dan fallback lintas-browser maksimum jika API tidak didukung.
coba window.webkitAudioContext; audioCtx = new AudioContext (); catch (e) {alert (‘Web Audio API tidak didukung di browser ini’); }
Satu konteks audio mendukung banyak masukan suara dan grafik audio yang kompleks, jadi Anda hanya memerlukan satu untuk setiap aplikasi audio yang kami buat.
02. Hubungkan Grafik Audio
Keluaran setiap simpul audio dapat dihubungkan ke masukan simpul audio lainnya dengan menggunakan Menghubung() fungsi. Dalam contoh ini Anda akan menghubungkan output node sumber ke node gain, dan menghubungkan output node gain ke tujuan konteks:
// Buat sumbernya. var source = context.createBufferSource (); // Buat node penguatan. var gain = context.createGain (); // Hubungkan sumber ke filter, filter ke tujuan. source.connect (keuntungan); gain.connect (konteks.destination);
Grafik audio ini sekarang dinamis, artinya Anda dapat mengubahnya kapan pun Anda mau. Anda dapat memutuskan node audio dari grafik dengan memanggil node.disconnect (outputNumber). Kekuatan pendekatan modular ini memungkinkan Anda mengontrol penguatan (volume) untuk semua suara, atau yang Anda inginkan. Anda dapat merutekan suara melalui efek atau tidak sama sekali, atau dalam kombinasi apa pun yang mungkin Anda perlukan.
03. Memuat suara
Untuk memuat file audio ke Web Audio API, kita dapat menggunakan file XMLHttpRequest dan proses hasilnya dengan context.decodeAudioData. Ini bekerja secara asinkron dan tidak memblokir utas antarmuka utama. Berikut adalah tampilan kodenya:
var request = new XMLHttpRequest (); request.open ('GET', url, true); request.responseType = ‘arraybuffer’; request.onload = function () {context.decodeAudioData (request.response, function (theBuffer) {buffer = theBuffer;}, onError); } permintaan dikirim();
04. Memutar suara
Buffer audio hanyalah salah satu sumber audio potensial. Anda dapat menggunakan input langsung dari mikrofon atau perangkat line-in atau audio> tag antara lain. Setelah Anda memuat buffer, Anda perlu membuat file AudioBufferSourceNode untuk itu, hubungkan node sumber ke grafik audio Anda, dan kemudian panggil mulai (0) di node sumber. Untuk menghentikan suara, panggil berhenti (0) di node sumber.
Kodenya terlihat seperti ini:
function playSound (buffer) {var source = context.createBufferSource (); source.buffer = buffer; source.connect (konteks.destinasi); source.start (0); }
05. Menyatukan semuanya
Seperti yang Anda lihat dari kode sebelumnya, ada sedikit penyiapan untuk memutar suara di API Audio Web. Namun, dengan pendekatan modular ini Anda mendapatkan kontrol maksimum atas audio. Mencampur suara, membaca datanya melalui Analyzer Node dan banyak lagi. Berikut adalah contoh kerja untuk memuat dan memainkan suara secara bersamaan. Pertimbangkan untuk mengabstraksi langkah-langkah ini untuk mengelola banyak suara dalam proyek yang lebih besar.
var audioCtx, analyzer, bufferLength, dataArray; window.addEventListener (‘load’, initAudio, false); function initAudio () {try catch (e) {alert (‘Web Audio API tidak didukung di browser ini’); } // muat file audio source = audioCtx.createBufferSource (); var request = new XMLHttpRequest (); request.open (‘GET’, ‘assets / beat3.mp3’, true); request.responseType = ‘arraybuffer’; request.onload = function () {var audioData = request.response; audioCtx.decodeAudioData (audioData, function (buffer) {source.buffer = buffer; source.connect (analyzer); analyser.connect (audioCtx.destination); source.loop = true; source.start (0);}, function ( e) {"Kesalahan dengan decoding data audio" + e.err}); } permintaan dikirim(); }
Web Audio API AnalyserNode
API Audio Web AnalyserNode memungkinkan Anda mengekstrak waktu, frekuensi, bentuk gelombang, dan data lain dari audio Anda. Dengan menggunakan fitur seperti getByteFrequencyData dan mengatur min dan maks rentang desimal, Anda dapat membidik pada aspek tertentu dari data audio.
Selain tempat tidur musik, efek, dan musik yang bagus, kami menggunakan suara untuk juga mendorong visual. Bergerak melampaui melengkapi atau meningkatkan apa yang dilihat pengguna, data audio sebenarnya dapat mendorong animasi. Efek sederhana yang menggunakan keseluruhan level (volume) trek musik dapat membuat latar belakang Anda berdenyut seiring dengan irama. Pembengkakan pada skor musik dapat digunakan untuk mengubah opasitas gambar atau mengubah warnanya.
Dengan memanfaatkan data audio melalui API Audio Web, kami juga mempelajari data frekuensi dan bentuk gelombang. Anda dapat memvisualisasikan suara dalam variasi yang tidak terbatas.
Temukan lebih lanjut di API Audio Web
Ingin mengetahui lebih lanjut? Ini adalah sumber daya yang harus Anda periksa.
Dokumen Web MDN- Tinjauan mendalam tentang API dengan dokumentasi dan contoh yang kaya. Setiap aspek API tercakup dengan baik.
W3C- Repositori yang berisi draf editor terbaru dari W3C Web Audio API. Ini adalah sumber di mana standar disajikan.
Pengantar API Audio Web- Pengenalan yang bagus untuk menggunakan API untuk membuat suara oleh Greg Hovanesyan. Buat aplikasi khusus musik menggunakan sumber audio osilator.
Audio Web Mingguan- Kumpulan berita, cerita, dan demo tentang API Audio Web. Mencakup berbagai topik dan contoh untuk membuat Anda terus belajar.
Artikel ini awalnya diterbitkan dalam edisi kreatif 275 majalah Web Designer. Beli edisi 275 atau langganan.
