Skip to content

a small tool to render spectograms (waterfall) or waveforms from audio in your browser

License

Notifications You must be signed in to change notification settings

fjw/audiovisualizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

audiovisualizer

a small tool to render spectrograms (waterfall graphs) or waveforms from audio in your browser

audio visuals

Demo 1 (standard config using microphone)

Demo 2 (showing different config possibilities with audio tracks)

npm

npm i @fjw/audiovisualizer

Getting started

Initialise the AudioVisualizer object:

new AudioVisualizer({options});

Example

new AudioVisualizer({ // no src, uses the microphone
    v: [
        {
            type: "spectrum",
            container: "#myspectrum"
        },

        {
            type: "waveform",
            container: "#mywaveform"
        }
    ]
});

required options

  • v an array of visualizations, each with individual options
  • v.type the type of the visualization, possible values are waveform and spectrum
  • v.container the css selector of the container (HTMLElement) where the canvas gets rendered in, if the container is resized, the canvas will be resized, too.

optional options

  • src URL of audio file/stream. skip to use microphone as source

  • muted start muted or with hearable audio (default: true)

  • analyser object with additional options for the analyser (see AnalyserNode (Mozilla Docs)) for example analyser.fftSize: 4096 increases the resolution (standard is 2048)

  • v.background background color

waveform only

  • v.lineWidth width of the line
  • v.strokeStyle strokeStyle (color) of the line

spectrum only

  • v.rowsPerSec speed of the waterfall
  • v.colortheme array of colors for the gradients (see examples)

methods

  • mute() mutes the audio
  • unmute() unmutes the audio
  • setSource(url) sets a new audiosource (false/null/undefined = microphone)

About

a small tool to render spectograms (waterfall) or waveforms from audio in your browser

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages