Skip to main content

Custom HTML Element

New Feature (v6.1.0): Custom HTML Elements.

Add <wms-controls>​

<wms-controls id="controlsId" single-play play-label="Play"></wms-controls>
<wms-controls id="controlsId" single-play-stop play-label="Play" stopLabel="Stop"></wms-controls>
<wms-controls id="controlsId" play-stop play-label="Play" stop-label="Stop"></wms-controls>
<wms-controls id="controlsId" play-pause-stop play-label="Play" pause-label="Pause" stop-label="Stop"></wms-controls>
💡
Labels are optional, defaults are used if omitted.
💡
Library v6.3.4 fixed attribute names to kebab-case, e.g. singlePlay => single-play.

Bind Document​

<script>
    doc.bindElement("controlsId");
</script>

Bind Player (Since v6.3.0)​

<script>
    // Either get default player
    const plyer = doc.getDefaultPlayer();

    // Or create new player
    const player = new Score.Player(doc);

    // Bind player
    player.bindElement("controlsId");
</script>

Live Example​

💡
Use HTML/JS version without React.useEffect(), just add HTML elements before JS code.