# wavesurfer.js + ELAN + Wave Segment

The Elan Wave Segment Plugin uses the table and the time values created by the ELAN plugin to insert a wave form column for each row.

## 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)

Fork me on GitHub