wavesurfer.js | HTML initialisation API example

Using the HTML initialisation script and the HTML attribute API is a quick way of creating wavesurfer instances.

<wavesurfer
    data-url="../media/demo.wav"
    data-plugins="regions"
    data-regions-regions='[{"start": 1,"end": 3,"color": "hsla(400, 100%, 30%, 0.5)"}, {"start": 5,"end": 7,"color": "hsla(200, 50%, 70%, 0.4)"}]'
>
</wavesurfer>

<wavesurfer
    data-url="../media/demo.wav"
    data-plugins="minimap,timeline"
    data-minimap-height="30"
    data-minimap-wave-color="#ddd"
    data-minimap-progress-color="#999"
    data-timeline-font-size="13px"
    data-timeline-container="#timeline"
>
</wavesurfer>
<div id="timeline"></div>