wavesurfer.js/plugin/wavesurfer.minimap.js

Interactive navigable audio visualization using Web Audio and Canvas

'use strict';

/* Minimap */
WaveSurfer.Minimap = WaveSurfer.util.extend({}, WaveSurfer.Drawer, WaveSurfer.Drawer.Canvas, {
    init: function (wavesurfer, params) {
        this.wavesurfer = wavesurfer;
        this.container = this.wavesurfer.drawer.container;
        this.lastPos = this.wavesurfer.drawer.lastPos;
        this.params = wavesurfer.util.extend(
            {}, this.wavesurfer.drawer.params, params, {
                scrollParent: false,
                fillParent: true
            }
        );

        this.width = 0;
        this.height = this.params.height * this.params.pixelRatio;

        this.createWrapper();
        this.createElements();

        this.bindWaveSurferEvents();
        this.bindMinimapEvents();
    },

    bindWaveSurferEvents: function () {
        var my = this;
        this.wavesurfer.on('ready', this.render.bind(this));
        this.wavesurfer.on('audioprocess', function () {
            my.progress(my.wavesurfer.backend.getPlayedPercents());
        });
    },

    bindMinimapEvents: function () {
        this.on('click', (function (e, position) {
            this.progress(position);
            this.wavesurfer.seekAndCenter(position);
        }).bind(this));
    },

    render: function () {
        var len = this.getWidth();
        var peaks = this.wavesurfer.backend.getPeaks(len);
        this.drawPeaks(peaks, len);
    }
});


WaveSurfer.initMinimap = function (params) {
    var map = Object.create(WaveSurfer.Minimap);
    map.init(this, params);
    return map;
};