Skip to main content

Plain JavaScript

Create Buttons​

<!-- Create button in HTML page -->
<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 built-in styles wms-button and wms-button-group.
// Create buttons in JavaScript
// Do not forget to append buttons to HTML page!
const playButtonEl = document.createElement("button");
const pauseButtonEl = document.createElement("button");
const stopButtonEl = document.createElement("button");

Use 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.
New Feature (v6.3.0): doc.getDefaultPlayer() and controls.setPlayer().
// Create controls
const controls = new Score.WmsControls();

// Set document for playback
controls.setDocument(doc); 

// Use default player and set to controls (since v6.3.0)
const player = doc.getDefaultPlayer();
controls.setPlayer(player);

// Create new player and set to controls (since v6.3.0)
const player = new Score.Player(doc);
controls.setPlayer(player);

Set Buttons (Since v6.3.0)​

// Setup single Play button
controls.setSinglePlay("playButtonId", "Play"); // With element id,
controls.setSinglePlay(playButtonEl, "Play");   // Or with element...

// Setup single Play/Stop toggle button
controls.setSinglePlayStop("playButtonId", "Play", "Stop");

// Setup Play and Stop buttons, with custom labels
controls.setPlayStop("playButtonId", "stopButtonId", "▶", "⏹");

// Setup Play, Pause and Stop buttons
controls.setPlayPauseStop("playButtonId", "pauseButtonId", "stopButtonId");
💡
Default labels if omitted are "Play", "Pause" and "Stop".

Set Buttons (Before v6.3.0)​

// Setup single Play/Stop toggle button
controls.setPlayStopButton("playButtonId", "Play", "Stop"); // With element id,
controls.setPlayStopButton(playButtonEl, "Play", "Stop");   // Or with element...

// Setup Play and Stop buttons, with custom labels
controls.setPlayButton("playButtonId", "▶");
controls.setStopButton("stopButtonId", "⏹");

// Setup Play, Pause and Stop buttons
controls.setPlayButton("playButtonId");
controls.setPauseButton("pauseButtonId");
controls.setStopButton("stopButtonId");
💡
Default labels if omitted are "Play", "Pause" and "Stop".

Live Example​