wavesurfer.js Regions

var wavesurfer = WaveSurfer.create({
    container: document.querySelector('#waveform'),
    waveColor: '#A8DBA8',
    progressColor: '#3B8686',
    backend: 'MediaElement',
    plugins: [
        WaveSurfer.regions.create({
            regionsMinLength: 2,
            regions: [
                {
                    start: 1,
                    end: 3,
                    loop: false,
                    color: 'hsla(400, 100%, 30%, 0.5)'
                }, {
                    start: 5,
                    end: 7,
                    loop: false,
                    color: 'hsla(200, 50%, 70%, 0.4)',
                    minLength: 1,
                    maxLength: 5,
                }
            ],
            dragSelection: {
                slop: 5
            }
        })
    ]
});