Minimap vertical

How to use minimap in vertical mode

---

Simply set the vertical option to true.

var wavesurfer = WaveSurfer.create({
        container: '#waveform',
        waveColor: 'violet',
        progressColor: 'purple',
        loaderColor: 'purple',
        cursorColor: 'navy',
        vertical: true,
        plugins: [
            WaveSurfer.minimap.create({
                container: '#wave-minimap',
                waveColor: '#777',
                progressColor: '#222',
                height: 50
            })
        ]
    });

You probably want to set an explicit height and use display: inline-flex on the container to ensure that the wave expands vertically and the waveform and minimap align well horizontally:

#waveform {
    display: inline-flex;
    height: 400px;
}