Audio Visualizer (vanilla JS, CSS, HTML)

You can find this project hosted at https://heatgub.github.io/JS-audio-visualizer/

Overview

• Choose your audio file and play it to create frequencies visualization
• Set parameters and save them as setting
• Export/Import all of your settings to .json file
• Import sample settings with one click
• Contol elements' display with keyboard hotkeys

Quick start

1. Open https://heatgub.github.io/JS-audio-visualizer/
2. Load your audio (GENERAL → Sound file → Browse)
3. Play (SPACE or click on the player)
4. Import Sample Settings (LOAD/SAVE → Sample Settings → ADD)
5. Load one of the added settings (LOAD/SAVE → Settings → LOAD)

3 main types of visualizers:

• Polygons
• Radial bars (with logarithmic amplitude scale option)
• Horizontal bars (with logarithmic amplitude scale option)

Settings management:

• LOAD/SAVE sidebar category
• Set parameters and save them as setting
• Export/Import all of your settings to .json file
• Import or remove sample settings with one click

Controls

• Browse and play a file to run (GENERAL → Sound file → Browse)
• Resize the sidebar by dragging its edge
• Set slider value with number input
• Focus the slider to change by the minimal value with side arrows
• mouse over a parameter to display its description

Hotkeys

• UP - show/hide sidebar
• DOWN - show/hide player
• F11 - fullscreen on/off
• SPACE - play/pause audio
• CTRL - FPS visibility
• SHIFT - opening buttons visibility

Depending on which you choose, there are different parameters to control. Polygons and radial bars may have rotation speed.

Performance

• Use FPS meter (CTRL) to check the performance.
• Most demanding is polygons mode, the rest should go fast even on mobile devices
• Since JS is executed at user's device, it depends on its capabilities
• Especially complex shapes with many lines (large FFT size) and high area of drawing are computationally expensive
• Lower down the slider value if you experience lags

Highest computation cost parameters:

• FFT size - Since FFT size/2 = bars(lines) amount
• Width Multiplier - Lower this first (polygons)
• Polygon Symmetry
• Inset Modifier - Negative inset with high amplification gives incredible shapes (along with incredible FPS drops ocasionally ;))
• Amplification - If lines are especially dense in the middle
• Shadow - Initially shadow's alpha=0 so it's not visible, therefore it's not taking resources. Shadow's blur is expensive.

Thanks

To Frankslaboratory for inspiring and teaching me to do this project.

Screenshots

GL & HF