Playback Buttons

React Component

Import react-ui subpath module.

import * as ReactUI from "web-music-score/react-ui";

In your TSX/JSX source file add button group to handle playback for given document.

// Add default playback buttons
<ReactUI.PlaybackButtons doc={doc} />

// Add togglable play/stop button
<ReactUI.PlaybackButtons doc={doc} singlePlayStop playLabel="Play" stopLabel="Stop" />

// Add play and stop buttons
<ReactUI.PlaybackButtons doc={doc} playStop playLabel="Play" stopLabel="Stop" />

// Add play, pause and stop buttons
<ReactUI.PlaybackButtons doc={doc} playPauseStop  playLabel="Play" pauseLabel="Pause" stopLabel="Stop" />

💡 Defaults labels (if omitted) are "Play", "Pause" and "Stop".

Plain JavaScript

Import score subpath module:

import * as Score from "web-music-score/score";

const btns = new Score.MPlaybackButtons();                  // Crete playback buttons

// Set desired buttons
// - First argument can be HTML button element or element id
// - Second argument is button label (optional)
btns.setPlayStopButton("playStopButtonId", "Play", "Stop"); // Set togglable play/stop button
btns.setPlayButton("playButtonId", "Play");                 // Set play button
btns.setStopButton("stopButtonId", "Stop");                 // Set stop button
btns.setPauseButton("pauseButtonId", "Pause");              // Set pause button

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

If you call set*Button with a button element id you need to declare them for example in HTML document.

<div class="wms-button-group">
    <!-- Add togglable play/stop button -->
    <button id="playStopButtonId" class="wms-button">Play</button>
    
    <!-- Or add set buttons -->
    <button id="playButtonId" class="wms-button">Play</button>
    <button id="pauseButtonId" class="wms-button">Pause</button>
    <button id="stopButtonId" class="wms-button">Stop</button>
</div>

💡 This example used custom styles wms-button and wms-button-group. You can also use bootstrap or other style system.