Audio Waveform SVG Path

Building path for SVG element to perform waveform view of audio file

Inspired by:

https://robots.thoughtbot.com/javascript-audio-api

Demo:

https://antonkalinin.github.io/audio-waveform-svg-path/

Installation

npm install --save audio-waveform-svg-path

Usage

import AudioSVGWaveform from 'audio-waveform-svg-path';

const trackWaveform = new AudioSVGWaveform({url: 'url of audio file'});

trackWaveform.loadFromUrl().then(() => {
    const path = trackWaveform.getPath();

    document.getElementById('my-path-element').setAttribute('d', path);
});

Constructor accepts object with one of keys:

{
    url: 'url address of audio file',
    buffer: 'audio as AudioBuffer'
}

Methods

• loadFromUrl - loads audio from url, returns Promise

• getPath(preprocessChannels) - returns a path of waveform, accepts callback function as only arument

Example of getPath with callback

const diffPath = trackWaveform.getPath(
    /*
        Use preprocessChannels callback to modify final list of channels.
        This callback will be invocked as a argument of reduce method of channels array.
     */
    (channels, channel) => {
        const prevChannel = channels[0];
        const length = channel.length;
        const outputChannel = [];

        if (prevChannel) {
            for (let i = 0; i < length; i++) {
                // flip phase of right channel
                outputChannel[i] = (channel[i] - prevChannel[i]);
            }

            channels[0] = outputChannel;
        } else {
            channels.push(channel);
        }

        return channels;
    },
    []
);

License

MIT