/JS-audio-visualizer

Live Audio Visualizer - load and save your settings (vanilla JS, CSS, HTML)

Primary LanguageJavaScript

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