Plain JavaScript

Create Controls

const controls = new Score.WmsControls();

Deprecated (v6.1.0): Score.WmsControls replaces Score.MPlaybackButtons.
Score.MPlaybackButtons is deprecated and will be removed in a future major release.
Existing code can be migrated by renaming Score.MPlaybackButtons to Score.WmsControls.

Create buttons

In HTML

<div class="wms-button-group">
    <button id="playButtonId" class="wms-button"></button>
    <button id="pauseButtonId" class="wms-button"></button>
    <button id="stopButtonId" class="wms-button"></button>
</div>

💡

This example uses included CSS styles wms-button and wms-button-group. You can use bootstrap or any other style system.

Programmatically

const playButtonEl = document.createElement("button");
const pauseButtonEl = document.createElement("button");
const stopButtonEl = document.createElement("button");

💡

Do not forget to add buttons to the page!

Set Buttons (Since v6.3.0)

Setup with single play button:

// With element id:
controls.setSinglePlay("playButtonId", "Play");

// With element:
controls.setSinglePlay(playButtonEl, "Play");

Setup with single play/stop toggle button:

// With element id:
controls.setSinglePlayStop("playButtonId", "Play", "Stop");

// With element:
controls.setSinglePlayStop(playButtonEl, "Play", "Stop");

Setup with play and stop buttons:

// With element id:
controls.setPlayStop("playButtonId", "stopButtonId", "Play", "Stop");

// With element:
controls.setPlayStop(playButtonEl, stopButtonEl, "Play", "Stop");

Setup with play, pause and stop buttons:

// With element id:
controls.setPlayPauseStop("playButtonId", "pauseButtonId", "stopButtonId");

// With element:
controls.setPlayPauseStop(playButtonEl, pauseButtonEl, stopButtonEl);

💡

Labels are optional, use default if omitted.

Set Buttons (Before v6.3.0)

Setup with single play/stop toggle button:

// With element id:
controls.setPlayStopButton("playButtonId", "Play", "Stop");

// With element:
controls.setPlayStopButton(playButtonEl, "Play", "Stop");

Setup with play and stop buttons:

// With element id:
controls.setPlayButton("playButtonId", "Play");
controls.setStopButton("stopButtonId", "Stop");

// With element:
controls.setPlayButton(playButtonEl, "Play");
controls.setStopButton(stopButtonEl, "Stop");

Setup with play, pause and stop buttons:

// With element id:
controls.setPlayButton("playButtonId");
controls.setPauseButton("pauseButtonId");
controls.setStopButton("stopButtonId");

// With element:
controls.setPlayButton(playButtonEl);
controls.setPauseButton(pauseButtonEl);
controls.setStopButton(stopButtonEl);

💡

Labels are optional, use default if omitted.

Set Document

controls.setDocument(doc); 

Set Player (Since v6.3.0)

Either get default player:

const player = doc.getDefaultPlayer();

Or create new player:

const player = new Score.Player(doc);

And bind player:

controls.setPlayer(player);

Live Example

💡

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