How to Enable Elan Wave Segment

Javascript Dependencies

• Wavesufer
• Region Plugin
• ElAN Plugin
• ELAN Wave Segment

<script src="[path_to]/wavesurfer.min.js"></script>
<script src="[path_to]/plugin/wavesurfer.region.min.js"></script>
<script src="[path_to]/plugin/wavesurfer.elan.min.js"></script>
<script src="[path_to]/plugin/wavesurfer.elan-wave-segment.min.js"></script> 

Javascript Initialization

// Create the wave surfer instance
var wavesurfer = Object.create(WaveSurfer);

// Create elan instance
var elan = Object.create(WaveSurfer.ELAN);

// Create Elan Wave Segment instance
var elanWaveSegment = Object.create(WaveSurfer.ELANWaveSegment);

document.addEventListener('DOMContentLoaded', function () {
    var options = {
        container     : '#waveform',
    };

    //################## set up some listeners ####################

    //set up listener for when elan is done
    elan.on('ready', function (data) {
        wavesurfer.load('../elan/transcripts/001z.mp3');
    });

    //set up listener for playing when clicked on
    elan.on('select', function (start, end) {
        wavesurfer.backend.play(start, end);
    });
    //############################## initialize wavesurfer and related plugins###############

    // Init wavesurfer
    wavesurfer.init(options);

    //init elan
    elan.init({
        url: '../elan/transcripts/001z.xml',
        container: '#annotations',
        tiers: {
            Text: true,
            Comments: true
        }
    });

    //int elanWaveSegment when wavesurfer is done loading the sound file
    wavesurfer.on('ready', function() {
        options.plotTimeEnd = wavesurfer.backend.getDuration();
        options.wavesurfer = wavesurfer;
        options.ELAN = elan;
        elanWaveSegment.init(options);
    });

    //update waveSegments when time advances
    var onProgress = function (time) {
        elanWaveSegment.onProgress(time);
        //code for scrolling Elan goes here
    };
    wavesurfer.on('audioprocess', onProgress);
}); 

Options

• ELAN: required - The ELAN instance used to parse the elan data
• wafesurver: required - The wavesurfer instance used to draw the original waveform
• waveSegmentWidth: optional - The width of each wave segment (defaults to 200)
• waveSegmentPeaksPerSegment: optional - The number of peaks that should be drawn (defaults to 400)
• waveSegmentHeight: optional - The height of each wave segment (defaults to 30)
• waveSegmentRenderer: optional - The renderer (drawer) to be used for the wave segments
• waveSegmentNormalizeTo: optional - What to normalize each wave segment to [whole, segment,none]
• waveSegmentBorderWidth: optional - The width of the border of the container element
• waveSegmentBarHeight: optional - the height of the peaks/bars (defaults to 1)