waveshaper-dom v0.3.1

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/waveshaper-dom@0.2.19/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

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