edlp_d8/libraries/wavesurfer/example/spectrogram/app.js

'use strict';

var wavesurfer;

// Init & load
document.addEventListener('DOMContentLoaded', function () {
    // Create an instance
    wavesurfer = WaveSurfer.create({
        container     : '#waveform',
        waveColor     : 'violet',
        progressColor : 'purple',
        loaderColor   : 'purple',
        cursorColor   : 'navy',
        plugins: [
            WaveSurfer.spectrogram.create({
                container: '#wave-spectrogram'
            })
        ]
    });

    if (location.search.match('scroll')) {
        options.minPxPerSec = 100;
        options.scrollParent = true;
    }

    if (location.search.match('normalize')) {
        options.normalize = true;
    }

    /* Progress bar */
    (function () {
        var progressDiv = document.querySelector('#progress-bar');
        var progressBar = progressDiv.querySelector('.progress-bar');

        var showProgress = function (percent) {
            progressDiv.style.display = 'block';
            progressBar.style.width = percent + '%';
        };

        var hideProgress = function () {
            progressDiv.style.display = 'none';
        };

        wavesurfer.on('loading', showProgress);
        wavesurfer.on('ready', hideProgress);
        wavesurfer.on('destroy', hideProgress);
        wavesurfer.on('error', hideProgress);
    }());


    wavesurfer.load('../media/demo.wav');
});