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();