Menghasilkan Gambar Spektrum Audio Menggunakan Audiowaveform

Kalau anda menyukai musik atau apapun yang berbau audio maka jika anda sebagai pengembang mungin agak penasaran bagaimana ya caranya men-generate spektrum visual, ya kalau anda pernah memakai layanan Soundcloud pasti tahu tampilan spektrum yang berwarna oranye itu.

https://bit.ly/2Ee5vGE

Audiowaveform

Salah satu tool yang bisa mengasilkan gambar spektrum seperti pada gambar diatas salah satunya adalah audiowaveform.

Kalau anda explore di Github sebenarnya banyak tool untuk ini hanya saja saya pribadi sudah sangat lama memakai paket ini jadi kalau ada paket npm atau tool yang lebih baik silahkan komen dibawah. Trims

Kalau anda memakai Linux atau macOS tidak ada masalah dalam memakai tool ini, sayangnya paket ini secara native tidak tersedia untuk Windows kecuali jika anda menginstalnya memakai WSL.

• Enable WSL di Windows 10 (Powershell Administrator)

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

• Download Linux Distro (Ubuntu 16.04)

curl.exe -L -o ubuntu-1604.appx https://aka.ms/wsl-ubuntu-1604

• Install Distro (sesuaikan Path)

Add-AppxPackage -Path C:\Users\Iwan\Downloads\ubuntu-1604.appx

Kemudian setelah Ubuntu terinstal silahkan login.

• Tambahkan PPA untuk audiowaveform dan instal tool tersebut

$ sudo add-apt-repository ppa:chris-needham/ppa
$ sudo apt-get update
$ sudo apt-get install audiowaveform

Kalau anda memakai Visual Studio Code dan memang saya sangat menyarankan untuk memakai editor satu ini 😄, maka anda bisa menggunakan terminal WSL (bash Ubuntu) untuk mengakses audiowaveform.

Penggunaan audiowaveform sangat mudah seperti perintah dasar untuk menghasilkan gambar waveform berformat png

$ audiowaveform -i audio.mp3 -o waveform.png

atau silahkan anda baca di github untuk berbagai pilihan dan kebutuhan.

Audio — https://github.com/sajenid/paman-ngguyang-jaran

dan hasil keluaran waveform dari contoh audio pada screenshot diatas seperti berikut

Sip!

Meskipun tidak mirip banget dengan tampilan seperti di Soundcloud tetapi menurut saya lumayan bagus untuk bereksperimen.

Eksperimen?

ya, selain berupa gambar tool audiowaveform ini bisa mengeluarkan data biner dan JSON yang kemudian bisa diolah lebih lanjut.

Misalnya dalam penerapan memainkan file mp3 melalui web browser seperti dibawah ini

https://sajenid.github.io/paman-ngguyang-jaran/

Berkas JSON hasil keluaran audiowaveform adalah berupa teks yang berisi data-data sampling audio sehingga data-data yang sebenarnya hanyalah berupa array akan sangat mudah untuk diolah lebih lanjut.

pnj.json

{“version”:2,”channels”:1,”sample_rate”:44100,”samples_per_pixel”:256,”bits”:16,”length”:39992,”data”:[-2306,1482,-4240,3637,-2875,4306,-2624,2426,-3447,4522,-3376,5096,-3016,1997,-3370,4896,-3613,4256,-2722,2721,-3482,4806,-3829,5094,-2880,2785,-2554,5967,-4843,5005,-2562,3…]}

Sedangkan data dat adalah data biner yang ukurannya jauh lebih kecil dibandingkan file JSON hanya saja data dat hanya didukung oleh browser yang mendukung Typed Arrays.

Kalau anda bingung dengan apa yang saya maksudkan silahkan lihat repositori dari contoh Paman Ngguyang Jaran.

Lalu adakah pustaka yang memudahkan untuk mengolah data hasil audiowaveform?

Untungnya dari vendor yang sama juga membuat pustaka yang bernama peaks.js dimana pustaka ini digunakan untuk mengolah data dat untuk keperluan interaktifitas audio di browser web.

Jadi menurut saya sebagai pengembang sudah pasti sangat dimudahkan untuk membuat banyak hal dengan sumber daya open source yang seabrek diluaran sana.

Ok,
Happy Hacking & Selalu Kreatif!

Tentang Saya
Programer yang tidak terlalu bertendensi ke bahasa pemrograman tertentu, meskipun saya termasuk fans berat dari Node.js tetapi selama problem terselesaikan, ok saja kalau harus memakai teknologi lain — Github, Twitter

Sepertinya tepuk tangan 👏 pengganti LIKE bisa sampai 50, jadi kalau tepuk tangan atau clap cuman 1 akan kelihatan sangat aneh 😆 (Gak..maksud saya clap akan membantu supaya yang lain bisa lebih mudah menemukan artikel ini. Trims)