Bukan animasi acak — 64 batang ini digerakkan langsung oleh AnalyserNode yang membaca kick, hi-hat, dan bassline generatif secara real-time dari Web Audio API.
Aktifkan backsound agar bar merespons beat asli, bukan pola idle · tekan H untuk sembunyikan antarmuka
Kebanyakan "audio visualizer" di internet cuma menggoyangkan bar secara acak. Di sini, tinggi tiap batang berasal dari data frekuensi sungguhan lewat AnalyserNode — drum machine generatif di baliknya memutar kick, hi-hat, dan bass tanpa file audio eksternal.
Tinggi 64 bar dibaca langsung dari getByteFrequencyData tiap frame, bukan hasil interpolasi acak.
Kick, hi-hat, dan pola bass 16 langkah disintesis penuh dari osilator dan noise buffer — berbeda kombinasi tiap kali dijalankan.
Tiap bar punya gradien tiga-titik yang rona-nya bergeser seiring waktu, memberi kesan spektrum yang hidup tanpa efek bayangan berat.
Sebelum backsound diaktifkan, bar tetap bergerak lewat gelombang sinus per-bar — layar tak pernah terasa mati.
Glow sepenuhnya berasal dari gradient warna, bukan shadowBlur per-bar, agar frame rate tetap stabil di 64 batang sekaligus.
Lebar tiap bar dan resolusi canvas dihitung ulang otomatis terhadap ukuran layar dan rasio piksel perangkat.
Angka nyata dari mesin audio dan render yang sedang berjalan di bagian atas halaman ini.
Klik tombol backsound pada demo di atas untuk memulai drum machine generatif dan menghidupkan analisis frekuensi.
Begitu audio aktif, tinggi tiap bar langsung mengikuti kick, hi-hat, dan bassline secara real-time.
Semua elemen antarmuka menghilang halus, menyisakan layar visualizer penuh — siap direkam atau ditayangkan.