High-resolution real-time graphic audio spectrum analyzer JavaScript module with no dependencies.
This is the graphic spectrum analyzer I originally wrote for audioMotion, here in a standalone module for you to use in your own JavaScript projects.
- High-resolution (retina / HiDPI ready) real-time audio spectrum analyzer with fullscreen support
- Logarithmic frequency scale with customizable range
- 10 visualization modes: choose between discrete frequencies or octave bands based on the equal tempered scale
- Optional vintage LED effect and variable luminance bars for octave bands modes
- Customizable Web Audio API parameters: FFT size, sensitivity and time-smoothing
- Comes with 3 predefined color gradients - easily add your own!
- No dependencies, less than 20kB minified
Install with npm:
npm install audiomotion-analyzer
ES6 import:
import AudioMotionAnalyzer from 'audiomotion-analyzer';
Minimal constructor:
var audioMotion = new AudioMotionAnalyzer(
document.getElementById('container'),
{
source: document.getElementById('audio')
}
);
This will insert the analyzer canvas inside the #container element and start the visualization of audio coming from the #audio element.
new AudioMotionAnalyzer( [container], [{options}] )
Creates a new instance of audioMotion-analyzer. A canvas element will be created and inserted into the container element. If container is undefined, the canvas is appended to the document's body.
Available options with default values shown inside parentheses:
options = {
fftSize: <number> (8192)
gradient: <string> ('classic')
height: <number>
loRes: <boolean> (false)
lumiBars: <boolean> (false)
maxDecibels: <number> (-25)
maxFreq: <number> (22000)
minDecibels: <number> (-85)
minFreq: <number> (20)
mode: <number> (0)
onCanvasDraw: <function>
onCanvasResize: <function>
showBgColor: <boolean> (true)
showFPS: <boolean> (false)
showLeds: <boolean> (false)
showPeaks: <boolean> (true)
showScale: <boolean> (true)
smoothing: <number> (0.5)
source: <HTMLMediaElement>
start: <boolean> (true)
width: <number>
}
If source is specified in the options, the media element will be connected to the analyzer. You can later disconnect it by referring to the audioSource object.
You can connect additional audio sources with the connectAudio() method.
See the demo folder for code examples of interaction with the objects below.
analyzer AnalyserNode object
Connect any additional audio sources to this object, so their output is displayed in the graphic analyzer.
audioCtx AudioContext object
Use this object to create additional audio sources to be connected to the analyzer, like oscillator nodes, gain nodes and media streams.
audioSource MediaElementAudioSourceNode object
Object representing the HTML media element connected using the source option of the class constructor. See also the connectAudio() method.
Canvas element created by audioMotion.
2D rendering context for drawing in audioMotion's canvas.
dataArray UInt8Array array (Read only)
Data array returned by the analyzer's getByteFrequencyData().
Array size is half the current FFT size, with element values ranging from 0 to 255.
Each array element represents a specific value in the frequency domain, such that: frequency = i * audioCtx.sampleRate / fftSize, where i is the array index.
The data is updated on every animation frame (ideally 60 times per second).
Number of samples used for the FFT performed by the analyzer node. It must be a power of 2 between 32 and 32768, so valid values are: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, and 32768.
Higher values provide more detail in the frequency domain, but less detail in the time domain. Defaults to 8192.
Current frame rate.
Canvas dimensions used during fullscreen mode. These take the current pixel ratio into account and will change accordingly when low-resolution mode is set.
Currently selected gradient. gradient must be the name of a built-in or registered gradient. Built-in gradients are 'classic', 'prism' and 'rainbow'. Defaults to 'classic'.
Nominal dimensions of the analyzer.
If one or both of these are undefined, the analyzer will try to adjust to the container's width and/or height.
If the container's width and/or height are 0 (inline elements), a reference size of 640 x 270 pixels will be used to replace the missing dimension(s).
This should be considered the minimum dimensions for proper visualization of all available modes with the LED effect on.
You can set both values at once using the setCanvasSize method.
If you want the actual canvas dimensions, use audioMotion.canvas.width and audioMotion.canvas.height.
true when the analyzer is being displayed in fullscreen, or false otherwise.
true if the analyzer canvas animation is running, or false if it's stopped.
true for low resolution mode. Defaults to false.
Low resolution mode halves the effective pixel ratio, resulting in four times less pixels to render. This may improve performance significantly, especially in 4K+ monitors.
See this note on using this feature interactively.
true to always display full-height bars and vary their luminance instead. Only effective for visualization modes 1 to 8 (octave bands). Defaults to false.
Highest and lowest decibel values represented in the Y-axis of the analyzer. The loudest volume possible is 0. maxDecibels defaults to -25 and minDecibels defaults to -85.
You can set both values at once using the setSensitivity() method.
For more info, see AnalyserNode.minDecibels.
Highest and lowest frequencies represented in the X-axis of the analyzer. Values in Hertz. maxFreq defaults to 22000 and minFreq defaults to 20.
You can set both values at once using the setFreqRange() method.
Current visualization mode. Valid values are:
| Value | Mode |
|---|---|
| 0 | Discrete frequencies |
| 1 | 1/24th octave bands |
| 2 | 1/12th octave bands |
| 3 | 1/8th octave bands |
| 4 | 1/6th octave bands |
| 5 | 1/4th octave bands |
| 6 | 1/3rd octave bands |
| 7 | half octave bands |
| 8 | full octave bands |
| 9 | reserved (not valid) |
| 10 | Area fill |
Defaults to 0 (discrete frequencies).
Function to be called after audioMotion finishes rendering a frame on the canvas. The audioMotion object will be passed as an argument to the callback function.
Function to be called whenever the canvas is resized. Two arguments will be passed to the callback function: a string with the reason why the function was called (see below) and the audioMotion object.
| Reason | Description |
|---|---|
'create' |
canvas created by the class constructor |
'fschange' |
analyzer entered or left fullscreen mode |
'lores' |
low resolution mode toggled on or off |
'resize' |
browser window resized (only when width and/or height are undefined) |
'user' |
canvas dimensions changed by the user, via setCanvasSize() or setOptions() methods |
Current devicePixelRatio. This is usually 1 for standard displays and 2 for retina / Hi-DPI screens. You can refer to this value to adjust any additional drawings done in the canvas. When low-resolution mode is active pixelRatio is halved, i.e. 0.5 for standard displays and 1 for retina / Hi-DPI.
true to use background color defined by current gradient; false for black background. Defaults to true.
true to display the current frame rate. Defaults to false.
true to activate LED display effect. Only effective for visualization modes 1 to 8 (octave bands). Defaults to false.
true to show amplitude peaks for each frequency. Defaults to true.
true to display frequency labels in the X axis. Defaults to true.
Sets the analyzer's smoothingTimeConstant. value must be a float between 0 and 1.
Lower values make the analyzer respond faster to changes. Defaults to 0.5.
Connects an HTMLMediaElement (<audio> or <video> HTML element) to the analyzer.
Returns a MediaElementAudioSourceNode which can be used for later disconnection.
For connecting other audio sources, like oscillators and streams, use the audioCtx and analyzer objects. See this example.
Registers a custom gradient. name is a string that will be used for the gradient property.
options = {
bgColor: '#111', // background color (required)
dir: 'h', // add this for a horizontal gradient (optional)
colorStops: [
'#f00', // list your gradient colors here (at least 2 colors are required)
{ pos: .6, color: '#ff0' }, // use an object to specify the position (0 to 1) of a color
'hsl( 120, 100%, 50% )' // colors may be defined in any HTML valid format
]
}
Sets the analyzer nominal dimensions in pixels. See height and width properties for details.
Sets the desired frequency range. Values are expressed in Hz (Hertz).
Shorthand method for setting several options at once.
options is an object with the same structure used in the class constructor, except for the source option which is only available at construction time.
Adjust the analyzer's sensitivity. See maxDecibels and minDecibels properties.
Starts (true) or stops (false) the analyzer animation. If no argument provided, inverts the current status. Returns the resulting status.
The analyzer is started by default upon object construction, unless you specify start: false in the options.
Toggles fullscreen mode. As per API specification, fullscreen requests must be triggered by user activation, so you must call this function from within an event handler or otherwise the request will be denied.
audioMotion-analyzer copyright (c) 2018-2019 Henrique Avila Vianna
Licensed under the GNU Affero General Public License, version 3 or later.