Artikel ini merupakan repost dari artikel tulisan Muhibbudin Suretno yang dipublikasikan di Easyread. Baca artikel sumber.

TL;DR — Jika saat ini kamu masih baru dalam mempelajari JavaScript, saya sarankan kamu untuk mempelajari terlebih dahulu dasar-dasar JavaScriptsebelum membaca artikel ini.

Karena di artikel ini saya akan menjelaskan beberapa fungsi built-in JavaScript yang jarang kamu dengar sebelumnya.


Introduction

Sebelumnya saya meminta maaf bila ada tulisan saya yang salah, karena saya juga bukan orang yang berpengalaman pada bidang ini. 🙂

Apa kamu seorang yang menyukai musik atau suara? ketika kamu menikmati alunan suara tersebut terkadang anggota badan kamu akan mengikuti ketukan dan irama yang di dengar oleh telingamu. Dan ada kalanya kamu sendiri ingin mengetahui secara visual seperti apa ketukan-ketukan irama tersebut yang sebenarnya berbentuk gelombang frekuensi.

Image from Google Images.

Dikutip dari Wikipedia, Bunyi atau suara adalah pemampatan mekanis atau gelombang longitudinal yang merambat melalui medium. Medium atau zat perantara ini dapat berupa zat cair, padat, gas. Jadi, gelombang bunyi dapat merambat misalnya di dalam air, batu bara, atau udara.

Geeting Deeper

Jika kamu seorang web developer pasti hampir setiap hari kamu berurusan dengan sebuah bahasa pemrograman yang bernama JavaScript namun pertanyaannya seberapa tahukah kamu tentang JavaScript ? Apabila saya jelaskan disini mungkin akan terlalu panjang lebar dengan perkembangan teknologi pada JavaScript yang begitu cepat setiap harinya.

Dan sebagai catatan di artikel ini saya akan menjelaskan beberapa fungsi built-inJavaScript dalam format ES5 (ECMA Script 5), mungkin kamu sudah mengenal tentang React, Angular, Vue, Meteor atau framework lainnya atau juga yang paling populer (namun akan segera ditinggalkan) yaitu jQuery.

Baca Juga  Ingin Jadi Programmer? Pelajari 7 Tips Terbaik Berikut Ini!

Tapi apakah JavaScript hanya berfungsi sebagai library? plugin? atau kita sebut juga sebagai framework? yang pada beberapa kasus hanya mengurusi interaksi dan manipulasi DOM (Document Object Model) . Tentunya tidak, JavaScript lebih dari sekedar hal-hal tersebut JavaScript–pun memiliki beberapa fungsi lain yang mungkin jarang sekali kamu dengar tapi kamu pernah menggunakannya.


Let’s Write Your Code

Dan sekarang kita akan mulai menuliskan kode-kode yang akan kita gunakan untuk meng–eksplore Audio pada web dengan JavaScript, pertama tentunya kita siapkan terlebih dahulu sebuah file .html yang akan menjadi halaman utama project ini. Kita sebut saja index.html dan strukturnya seperti di bawah ini:

Seperti pada file .html umumnya kita mulai dengan <html> sampai </html> , pada stuktur kode di atas bisa kamu lihat saya menambahkan element canvasyang akan menjadi tempat kita menggambar frequency dalam bentuk garis. Selanjutnya tag audio yang menjadi songplayer sekaligus sumber yang akan kita olah lagi menjadi frequency array.

Dan input file yang akan memasukan file lagu kedalam tag audio yang sudah kita siapkan, jika di buka file diatas akan menghasilkan tampilan seperti ini:

Tampilan awal ketika file index.html dibuka di browser.

Selanjutnya pada baris 32 dan seterusnya di file index.html kita akan mulai membuat proses yang akan merubah suara menjadi baris-baris frekuensi.

Dan pertama kita tuliskan beberapa code sebagai berikut, yang berfungsi sebagai variable yang berisi source, player, canvas, color & blob URL yang akan kita gunakan lagi nantinya.

Potongan code yang berisi variable yang dibutuhkan.

Pada baris 1113 kita akan melakukan checking apabila browser tidak mensupport window.URL maka akan muncul warning.

Baca Juga  Sambut Pemilu, Instagram Hadirkan Stiker Bertema 'Suara Indonesia'

Lalu setelah kondisi checking kita tambahkan event untuk mendeteksi ketika user memasukan (upload) file melalui element input lalu kita proses file tersebut dan kita konversi ke ObjectURL agar bisa kita masukan ke dalam tag audio yang sudah kita siapkan. Terakhir kita play lagu yang sudah di masukan oleh user.

Fungsi pertama ketika mendeteksi ada perubahan pada input file.

Pada line 13 di code diatas terdapat code yang memanggil fungsi stream() yang berfungsi untuk memproses Audio yang di putar kedalam AudioContextuntuk selanjutnya di analisa ke dalam Analyser.

Berikut potongan kodenya:

Fungsi stream() yang menyambungkan tag Audio dengan fungsi AudioContext.

Pada fungsi stream diatas kita mulai dengan melakukan inisialisasi AudioContext kedalam variable audio dan inisialisasi Analyser kedalam variable analyser , selanjutnya kita deteksi ketika player (tag audio) memutar musik (event addEventListener ‘canplay’) kita masukan player kedalam AudioContext.

Lalu kita sambungkan lagi AudioContext dengan Analyser selanjutnya kita sambungkan Analyser dengan destinasi AudioContext.

Dan setelah itu kita set fftSize (baris 12) menjadi 128, angka 128 ini adalah besaran frekuensi yang akan kita pantau dalam bentuk titik (node) semakin tinggi angkanya maka akan semakin banyak pula titik yang akan ditampilkan, lebih lanjut mengenai Fast Fourier Transform (fftSize) bisa kamu baca disini.

Selanjutnya buka kembali project ini pada browser dan coba masukan sebuah lagu pada input file, maka pada tab console akan memunculkan array seperti berikut:

Hasil awal ketika fungsi stream() dijalankan.

Lalu, kenapa belum keluar apapun pada canvas? sabar dulu tinggal sedikit lagi. Selanjutnya kita akan menambahkan fungsi yang akan merubah titik-titik array tadi menjadi sebuah garis yang akan ditampilkan kedalam canvas.

Fungsi tersebut adalah sebagai berikut, kalian bisa tambahkan script ini di bawah kode console.log(frequency) .

Baca Juga  5 Bahasa Pemrograman Hebat yang Kurang Diminati untuk Dipelajari
Fungsi untuk menggambar garis secara real-time berdasarkan frekuensi pada Audio player.

Fungsi diatas lumayan cukup panjang karena pada fungsi ini kita akan mengkonversi frekuensi yang sudah kita dapatkan dari kode sebelumnya menjadi sebuah garis.

Pada baris ke 2 kita menginisialisasi canvas dengan context 2D lalu selanjutnya di dalam fungsi draw() kita melakukan request animation frameyang akan memanggil ulang fungsi draw() setiap detik.

Lalu pada baris bawahnya kita tinggal menuliskan kode untuk menggambar canvas berdasarkan frekuensi tiap detik yang kita dapatkan dari fungsi analyser.getByteFrequencyData(frequency) , terakhir kita tambahkan satu fungsi lagi untuk merubah warna garis secara random.

Fungsi tambahan untuk mengganti warna garis secara acak.

Dan hasil akhirnya adalah sebagai berikut:

Hasil akhir dari artikel ini.

Dan berikut kode lengkap dari potongan-potongan kode diatas (silahkan uncomment console.log untuk menampilkan frequency array).

File index.html secara lengkap.

Tidak terasa sudah beberapa menit kamu membaca artikel ini dan saya rasa sudah saatnya saya undur diri. Terima kasih banyak sebelumnya telah mau membaca artikel ini hingga selesai.

Sebagai catatan saya pun disini bukan seorang yang expert dalam bahasa pemgrograman JavaScript jadi saya mohon maaf bila ada kata-kata atau sesuatu hal yang menurut anda salah. (Silahkan tuliskan di komentar)

Pranala Luar :

Baca juga: 4 Teknologi yang Sebaiknya Dikuasai Developer di Tahun 2018.

 

 

 

 

 

 

 

The post The Other Side of JavaScript — Audio Signal Scope appeared first on Teknologi.id.



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.