Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



This component is used to show a specific portion of an AudioBuffer (MDN). The waveform is draw with SVG (instead of Canvas) to keep the vectorial advantage.

Demo (CodePen)


Methods :

  • .setResolution( w<Number>, h<Number> )

    This method will call svg.setAttribute( "viewBox", "0 0 " + w + " " + h );.
    Calling setResolution will not fire another draw.

  • .draw( left<Float32Array>, right<Float32Array>, bufferDuration<Number>, offset<Number>, duration<Number> )

    left and right are the audioData of the two different channels (left and right) extracted from an AudioBuffer with getChannelData.
    bufferDuration is the total duration (in second) of the AudioBuffer.
    offset and duration delimite a specific portion of the buffer to draw (like the start method).
    None of these 5 arguments are optional.

  • .render( buffer<AudioBuffer>, offset<Number>, duration<Number> )

    This is a shortcut to the complex .draw previous method. Here, the method will extracts itself the data from the AudioBuffer, and will can read the bufferDuration. The method will take numberOfChannels into account.
    The two last arguments are optional.

  • .remove()

    Clear and remove the whole <svg> element.

  • .empty()

    Clear the SVG by removing the points attribute of the <polygon> SVG element.