# HTML initialisation API

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>

Fork me on GitHub