waveshaper-dom

This library offers high performance real-time drawing + interaction of audio waveforms. All functionality has touch support, the supported functionality is:

• pan
• (pinch) zoom
• drag
• resize
• cut

Demo's

• Basic multi-track
• More coming soon!

Installation

npm install waveshaper-dom

You can include it as a script tag with:

<script src="https://code.jquery.com/pep/0.4.3/pep.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/waveshaper-dom.min.js"></script>

All pages using this library should include the jquery pep library before hammer and waveshaper-dom for maximum cross browser compatibility:

<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>

Besides touch/mouse interaction the values can be changed programmatically via the setOptions method.

Options

Parameter	Type	Description
scrollPosition	number	Changing this value pans/scrolls the waveform.
samplesPerPixel	number	Zoom level, lower to zoom in, higher to zoom out.
resolution	number	Quality, higher for more detail, lower for faster rendering.
mode	'pan', 'drag', 'resize', 'cut'	Active interaction form, pan includes pinch zoom on touch devices.

Example

const container = document.getElementById('container');
const audioContext = new AudioContext();

const options = {
    samplesPerPixel: 1024,
    resolution: 64,
    width: container.clientWidth,
    height: 300,
    scrollPosition: 0,
    meterType: 'rms',
    samplerate: audioContext.sampleRate,
    mode: 'pan'
};

WS.setOptions(options);

const data = [
    { id: '1', url: 'path/to/audio.wav' },
    { id: '2', url: 'path/to/audio.wav' },
];

const tracks = [
    {
        id: '1', color: 'lightblue', intervals: [
            { id: '1', start: 10, end: 30, offsetStart: 5, index: 1, source: '1' },
            { id: '2', start: 15, end: 20, offsetStart: 2, index: 2, source: '2' },
        ]
    },
     {
        id: '2', color: 'teal', intervals: [
            { id: '3', start: 10, end: 30, offsetStart: 5, index: 1, source: '1' },
            { id: '4', start: 15, end: 20, offsetStart: 2, index: 2, source: '2' },
        ]
    },
];

tracks.forEach(track => {
    const canvas = document.createElement('canvas');
    WS.registerCanvas(track.id, canvas, track.color);

    constainer.appendChild(canvas);
});

WS.setInteraction(container)
    .setTracks(...tracks)
    .loadData(...data)
    .process();

// Updating scrollposition will pan the waveform
// Updating samples per pixel will change the zoom level
// Updating resolution will change the detail level
// Updating the mode will change which interaction is active
WS.setOptions({
    scrollPosition: 100,
    samplesPerPixel: 512,
    resolution: 32,
    mode: 'drag'
}).process();