audioMotion.js

audioMotion.js User Interface

screenshot1

Main controls

Audio source

ui-source

Select Microphone to visualize audio from your microphone instead of the music player.

Microphone input is only accessible to the browser in a secure context, i.e., if you’re accessing audioMotion via localhost, local file (open index.html directly) or HTTPS protocol.

If your sound card supports Stereo mix mode, this should be listed as an input device when access to your microphone is requested. The Stereo mix input allows audioMotion to read audio generated by any program running in your PC.

Please note that the visualization from microphone or stereo mix audio might suffer from a slight delay.

Player controls

ui-player

You can use the player controls to play, pause and skip through queued songs.

The Shuffle button shuffles the queue and starts playing it from the beginning.

When the Repeat option is active, the player will loop back to the first song after playing the entire queue.

Fullscreen mode and keyboard shortcuts

ui-fullscreen

Click the Fullscreen Analyzer button, or press the F key, to display the spectrum analyzer in fullscreen.

You can use the keyboard shortcuts below to control the player and change some settings without leaving fullscreen:

keys alternate action
Left / Right J / K play previous / next song
Space   play / pause
Up / Down Shift+G / G select previous / next gradient
A   cycle through auto gradient and random mode options
B   toggle background
D   display current song info - press again for settings info
E   shuffle play queue
F   toggle fullscreen mode
H   toggle FPS display
I   toggle song info display on track change
L   toggle LED effect on analyzer bars
Shift+M / M   select previous / next visualization mode
Shift+N / N   reduce / increase analyzer sensitivity
O   toggle low-resolution mode
P   toggle peaks display
R   toggle play queue repeat
S click on analyzer toggle frequency scale display
T   toggle flat text option
U   toggle luminance bars effect

User Interface Panels

Panels are accessed by clicking the Settings, Files and Console tabs.

Settings Panel

settings-panel

Preset

ui-preset

The Full resolution, Octave bands and LED bars presets adjust the settings to recommended values for the discrete frequencies and octave bands visualization modes, with optional LED effect mode.

You can tweak any options and save a favorite configuration by clicking the Save current settings button. You can later revert to this configuration by loading the Custom preset.

Additionally, your last used configuration will be automatically saved, and restored every time you open audioMotion. You can manually load the Last session preset to undo any changes made during the current session.

The Restore defaults preset resets all options to their initial values as in the first time you run audioMotion.

Gradient

ui-gradient

Several options of color gradients for the analyzer bars. You can change gradients with the Up and Down arrow keys, or alternatively, G and Shift + G keys.

Switches:

Analyzer switches

ui-switches

Performance-related options:

The underlined character in each switch label indicates its keyboard shortcut, when available.

Mode

ui-mode

Selects the visualization mode. Discrete frequencies mode allows you to visualize individual frequencies, limited only by the resolution of both the FFT and your display. Area fill mode displays the same frequency data, but as a filled shape.

The octave bands modes will display wider vertical bars, representing the amplitudes of ranges of frequencies based on a 24-tone equal tempered scale.

You can also select the visualization mode using the M and Shift + M keyboard shortcuts.

Switches:

FFT Size

ui-fftsize

The number of samples used for the Fast Fourier Transform performed by the analyzer. Larger values provide greater detail in the frequency domain (especially for low frequencies), but less detail in the time domain (slower response to changes).

Range

ui-range

The lowest and highest frequencies you want to see in the graphic spectrum analyzer. You can use this feature to “zoom in” a specific frequency range.

Smoothing

ui-smoothing

Average constant used to smooth values between analysis frames. Lower values make the analyzer react faster to changes, and may look better with faster tempo songs and/or larger FFT sizes. Increase it if the animation looks too “jumpy”.

Sensitivity

ui-sensitivity

Adjust the minimum and maximum decibel values to improve the visualization of songs too quiet or too loud. 0 dB represents the loudest possible sound volume.

You can also choose from three predefined sensitivity settings (low, normal and high) via the N and Shift + N keyboard shortcuts.

Files Panel

files-panel

File explorer

The file explorer allows you to navigate through the music folder shared by the server.

Double-click a music file or playlist to quickly add it to the queue. Press Ctrl to select multiple files, or Ctrl+Shift to select a range of files.

Click the Add selected button to add selected files to the queue, or the Add all files button to enqueue all music files in the current folder.

You can also drag and drop files from the file explorer into the play queue.

Supported extensions are flac, m4a, mp3, ogg and wav for music files, and m3u or m3u8 for playlists. Codec support may vary, depending on your web browser and operating system.

Play queue and playlists

Double-click a queued song to play it.

You can drag and drop queued songs to reorder them. Press Ctrl to select multiple files, or Ctrl+Shift to select a range. Press Delete (Backspace on Mac) to remove selected songs from the queue.

Clear clears the queue. Save as… saves the queue as a new local playlist, stored in your browser’s local storage.

Saved playlists appear in the playlist selection box. Select a playlist and click the folder-button button to load it into the queue. Press the disk-button button to update the selected playlist with the current queue contents. Press the trash-button button to permanently deleted the selected playlist.

Console

The console records several useful information, like audio and video settings, configuration changes and error messages.