7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Web Audio API: Menambahkan suara ke aplikasi Web Anda

Scroll to top
Read Time: 7 mins
This post is part of a series called The Web Audio API.
The Web Audio API: What Is It?
The Web Audio API: Make Your Own Web Synthesizer

Indonesian (Bahasa Indonesia) translation by Ade Khairul Umam (you can also view the original English article)

Apa yang terjadi untuk audio di web? Untuk waktu yang web adalah platform untuk memamerkan selera Anda di lagu. Dari versi MIDI The Final Countdown menggelegak di latar belakang, autoplaying MySpace MP3 yang dilemparkan di wajah Anda, suara adalah di mana-mana.

Tidak lagi. Setelah dibakar oleh kekejaman pengalaman pengguna ini, pengembang web tetap jauh dari itu. Sayangnya suara telah mengambil kursi belakang di web, sementara aplikasi asli berkembang.

Pikirkan pemberitahuan suara Anda mendengar ketika menerima email, atau pop sedikit ketika Anda menarik untuk me-refresh kericau app. Tampilkan apps seperti bagaimana suara dapat terpisahkan untuk pengalaman pengguna yang luar biasa.

Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana untuk membawa suara kembali ke web, dalam cara yang baik!

Web Audio API

Web Audio API adalah cara yang ampuh, kinerja tinggi memanipulasi suara di browser. Sebelum melanjutkan tutorial ini, Anda mungkin ingin memeriksa tutorial sebelumnya dalam seri ini di mana saya membahas bagaimana membuat suara dasar menggunakan JavaScript serta memainkan mp3 file.

Untuk tutorial ini kita akan memalsukan halaman pembayaran yang memberi kita umpan balik audio bahwa pembayaran kita berhasil. Saya akan menggunakan Bootstrap membuat hal-hal yang terlihat lebih bagus lebih cepat.

Anda akan melihat di bagian paling bawah saya telah menyertakan file bernama "sukses-sound.js". Ini adalah di mana kita akan menulis kode kami untuk menyediakan umpan balik audio ke pengguna ketika pembayaran sukses. Setelah Anda membuat berkas ini, hal pertama yang ingin kita lakukan adalah membuat AudioContext. Anda mungkin ingat dari tutorial terakhir bahwa AudioContext adalah bagaimana kita mengakses Web Audio API berbagai fungsi.

konteks var = new AudioContext();

Osilator

Salah satu hal terbaik tentang Web Audio API adalah bahwa hal itu memungkinkan kita untuk menciptakan suara dari awal bahkan tanpa melihat audio file. Kita melakukan ini menggunakan oscillators.

Oscillators adalah cara untuk menciptakan nada kita dapat mendengar. Mereka melakukan ini dengan menghasilkan gelombang periodik di frekuensi tertentu. Bentuk gelombang ini bervariasi, tetapi jenis yang paling umum adalah sinus, persegi, segitiga dan gigi gergaji gelombang. Jenis gelombang semua suara yang berbeda. Mari kita membuat dua segitiga gelombang oscillators.

Oscillators cukup keras secara default, jadi kecuali kita ingin memberikan pengguna kami yang ketakutan kehidupan mereka, kita harus mengecilkan volume sedikit. Karena Web Audio API bekerja oleh chaining node bersama-sama untuk pipa suara di sekitar, kami membuat dan menghubungkan osilator kami ke GainNode.

Keuntungan node kalikan volume suara datang dalam jumlah yang Anda tentukan. Jadi dalam hal ini volume akan menjadi sepersepuluh dari sinyal yang diteruskan ke sana.

Mari kita menghubungkan segala sesuatu.

Kemudian periksa yang sudah kami lakukan dengan bermain Oscillator selama dua detik.

Pada titik ini, Anda harus mendengar nada ketika Anda reload halaman Anda. Tidak suara yang paling menakjubkan, saya yakin Anda akan setuju, tetapi itu adalah awal!

Osilator yang kami telah membuat bermain di frekuensi standar. Dengan mengubah frekuensi ini, kita dapat mengubah catatan musik yang Anda dengar ketika permainan ini dimainkan. Ini adalah apa yang akan membuat nada kami yang sedikit lebih menyenangkan dan merupakan kunci untuk perasaan yang Anda ingin memohon ketika pengguna Anda mendengarnya. Mari kita mengubah osilator kami bermain di catatan "B4", yang merupakan 493.883 Hz.

Sekarang jika kita memuat ulang halaman, Anda akan mendengar nada pada nada yang berbeda. Anda mungkin berpikir pada titik ini, "Mengapa kami bermain dua osilator dengan pitch yang tepat sama?" Nah, ini membawa kita ke sebuah trik sedikit yang bisa kita lakukan untuk membuat kami nada suara sedikit lebih baik.

Jika kita detune kami oscillators untuk membuat frekuensi yang sedikit berbeda, kami berakhir dengan efek paduan suara bagus, membuat kami nada suara jauh lebih kaya.

Sementara kami sedikit suara suara jauh lebih baik, itu cukup tiba-tiba berakhir. Untuk membuat ini kurang menggelegar, kita harus cepat mengecilkan volume pada akhir suara; Hal ini juga dikenal sebagai "kaburnya". Hal ini dilakukan melalui AudioParams yang digunakan untuk mengotomatisasi nilai-nilai node audio, seperti keuntungan dan frekuensi. Kita akan pergi ke AudioParams dalam banyak lebih detail dalam tutorial berikutnya dalam seri ini.

Apa yang kita katakan di sini adalah memastikan bahwa volume berada 0.1 0,03 detik sebelum nada kami selesai. Kemudian menjaga menolak volume hingga mencapai nol pada saat yang sama kami nada selesai.

Mari kita membungkus kode kita begitu jauh ke dalam fungsi tunggal dan melihat apa yang kita punya.

Untuk membuat fungsi ini lebih kuat, saya sudah dihapus beberapa variabel dan membiarkan nilai-nilai ini untuk lulus di. Hal ini memungkinkan kita untuk bermain catatan yang berbeda pada frekuensi yang berbeda. Sekarang saatnya untuk mendapatkan kreatif!

Sukses

Berpikir tentang apa yang Anda ingin pengguna Anda merasa ketika mereka baru saja membeli sesuatu dari toko online Anda. Ini adalah pengalaman positif — seseorang telah membeli sesuatu yang mereka inginkan untuk membuat hidup mereka lebih baik entah bagaimana, tidak ada kesalahan terjadi dan transaksi diproses berhasil.

Audio-Wise, indikasi keberhasilan sebenarnya cukup sederhana. Motif musik yang berlangsung di lapangan pada akhir selalu terdengar jauh lebih gembira dari satu yang turun. Anda bahkan tidak perlu untuk memiliki sebuah lagu atau sejumlah catatan untuk menyampaikan ini. Untuk membuktikan teori ini, mari kita hanya menggunakan dua catatan satu motif kesuksesan kami.

Ahh, suara manis keberhasilan.

Ingat, jika bermain-main dengan oscillator bukan ide Anda untuk bersenang-senang, Anda dapat menggunakan file mp3 sebagai gantinya. Memiliki membaca tutorial sebelumnya untuk melihat bagaimana.

Terbaik untuk membungkus ini dua playNote panggilan ke panggilan fungsi tunggal sehingga kita punya mudah untuk menghubungkan ke dalam bermain suara kita.

Sekarang terserah Anda bagaimana Anda ingin memicu suara ini dan apa yang Anda ingin bermain dalam reaksi terhadap peristiwa. Untuk tujuan dari tutorial ini. Mari kita berpura-pura panggilan Ajax yang mengambil tiga detik. Kita akan menggunakan ini untuk berpura-pura bahwa beberapa sisi server transaksi yang terjadi.

Kita perlu lakukan sekarang adalah untuk menambahkan pendengar acara ke kami beli sekarang tombol.

Klik tombol, menunggu tiga detik, dan kemudian menari dengan gembira ketika Anda mendengar konfirmasi audio bahwa transaksi Anda telah berhasil.

Untuk mengubah teks tombol untuk visual menunjukkan bahwa sesuatu telah terjadi, Bootstrap menyediakan beberapa tombol fungsi pembantu untuk swap dalam teks yang diberikan dalam data atribut. Bagaimana ini bekerja adalah di luar lingkup artikel ini, tapi di sini adalah kode untuk kelengkapan.

Saya harap Anda telah menemukan tutorial ini berguna dan bahwa hal itu telah mendorong Anda untuk menambahkan suara (bertanggung jawab!) untuk aplikasi web Anda. Kode untuk tutorial ini terletak di GitHub, serta demo suara akhir kami. Tutorial berikutnya dalam seri ini adalah untuk Anda yang telah menangkap bug osilator; kami akan membangun sebuah web audio synthesizer.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.