Custom HTML Element

Create Controls In HTML

<!-- Create controls with single Play button -->
<wms-controls id="controlsId" single-play></wms-controls>

<!-- Create controls with single Play/Stop toggle button -->
<wms-controls id="controlsId" single-play-stop play-label="Play" stopLabel="Stop"></wms-controls>

<!-- Create controls with Play and Stop buttons, with custom labels -->
<wms-controls id="controlsId" play-stop play-label="▶" stop-label="⏹"></wms-controls>

<!-- Create controls with Play, Pause and Stop buttons -->
<wms-controls id="controlsId" play-pause-stop></wms-controls>

💡

Default labels if omitted are "Play", "Pause" and "Stop".

Bind Controls In JavaScript

<script>
    // Bind document to controls
    doc.bindElement("controlsId");

    // Use default player and bind to controls
    const player = doc.getDefaultPlayer();
    player.bindElement("controlsId");

    // Create new player and bind to controls
    const player = new Score.Player(doc);
    player.bindElement("controlsId");
</script>

Live Example