translation by 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. 1 2 3 4 5 6 Add sound to your web app 7 8 9 10 11 12 13 My shop 14 Are you ready to buy this item? 15 16 17 Name on card 18 19 20 21 Card number 22 23 24 25 Buy now 27 28 29 30 31 32 33 34 35 36 Anda akan melihat di bagian paling bawah saya telah menyertakan file bernama " 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. 1 var osc1 = 2 osc2 = 3 4 = 'triangle'; 5 = 'triangle'; 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. 1 var volume = 2 3 = 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. 1 // Connect oscillators to the GainNode 2 3 4 5 // Connect GainNode to the speakers 6 Kemudian periksa yang sudah kami lakukan dengan bermain Oscillator selama dua detik. 1 // How long to play oscillator for in seconds 2 var duration = 2; 3 4 // When to start playing the oscillators 5 var startTime = 6 7 // Start the oscillators 8 9 10 11 // Stop the oscillators 2 seconds from now 12 + duration; 13 + duration; 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 Hz. 1 var frequency = 2 3 = frequency; 4 = frequency; 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. 1 var frequency = 2 3 = frequency + 1; 4 = frequency - 2; 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. 1 // Set the volume to be just before the end of the tone 2 startTime + duration - 3 4 // Make the volume ramp down to zero seconds after the end of the tone 5 startTime + duration; Apa yang kita katakan di sini adalah memastikan bahwa volume berada 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. 1 // Play oscillators at certain frequency and for a certain time 2 var playNote = function frequency, startTime, duration { 3 var osc1 = 4 osc2 = 5 volume = 6 7 // Set oscillator wave type 8 = 'triangle'; 9 = 'triangle'; 10 11 = 12 13 // Set up node routing 14 15 16 17 18 // Detune oscillators for chorus effect 19 = frequency + 1; 20 = frequency - 2; 21 22 // Fade out 23 startTime + duration - 24 startTime + duration; 25 26 // Start oscillators 27 28 29 30 // Stop oscillators 31 + duration; 32 + duration; 33 }; 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. 1 // Play a 'B' now that lasts for seconds 2 playNote 3 4 // Play an 'E' just as the previous note finishes, that lasts for seconds 5 playNote + 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. 1 var playSuccessSound = function { 2 // Play a 'B' now that lasts for seconds 3 playNote 4 5 // Play an 'E' just as the previous note finishes, that lasts for seconds 6 playNote + 7 }; 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. 1 var myFakeAjaxCall = function callback { 2 setTimeoutfunction { 3 callback; 4 }, 3000; 5 }; Kita perlu lakukan sekarang adalah untuk menambahkan pendengar acara ke kami beli sekarang tombol. 1 $'buy-now-button'.clickfunction { 2 myFakeAjaxCallfunction { 3 playSuccessSound; 4 }; 5 }; 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. 1 $'buy-now-button'.clickfunction { 2 var that = this, 3 $btn = $this.button'loading'; 4 5 myFakeAjaxCallfunction { 6 playSuccessSound; 7 $ 8 }; 9 }; 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.