Skip to main content

Intro

Here is TypeScript and HTML versions of a simple example.

Learn more from tutorial pages.

Working Example​

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

export default function WorkingExample(props: {}) {
    const doc = new Score.DocumentBuilder()
        .setScoreConfiguration("treble")
        .setTimeSignature("3/4")
        .addNote(0, ["C4", "E4", "G4"], "4n")
        .addMeasure()
        .addChord(0, ["C4", "E4", "G4"], "2.", { arpeggio: true })
        .getDocument();

    return (
        <div>
            <ReactUI.PlaybackButtons doc={doc} playPauseStop />
            <br />
            <ReactUI.MusicScoreView doc={doc} />
        </div>
    );
}

Your browser does not support the HTML canvas tag.

Working HTML Example​

<!doctype html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Example</title>
</head>

<body>
    <h1>HTML Example</h1>

    <script src="https://unpkg.com/web-music-score@6.0.0-pre.3/dist/iife/index.js"></script>
    <script src="https://unpkg.com/web-music-score@6.0.0-pre.3/dist/iife/audio-cg.js"></script>
   
    <canvas id="scoreCanvasId"></canvas>
    <br />
    <button id="playButtonId" type="button" class="wms-button"></button>

    <script>
        const { Audio, Score } = window.WebMusicScore;
        const { ClassicalGuitar } = window.Audio_CG;

        Audio.addInstrument(ClassicalGuitar);

        const doc = new Score.DocumentBuilder()
            .setScoreConfiguration("treble")
            .setTimeSignature("3/4")
            .addNote(0, ["C4", "E4", "G4"], "4n")
            .addMeasure()
            .addChord(0, ["C4", "E4", "G4"], "2.", { arpeggio: true })
            .getDocument();

        new Score.MRenderContext().
            setCanvas("scoreCanvasId").
            setDocument(doc).
            draw();

        new Score.MPlaybackButtons().
            setPlayStopButton("playButtonId").
            setDocument(doc);
    </script>
</body>

</html>