Skip to content

Simple MIDI Player Example

See this demo live

This example demonstrates how to quickly set up a synthesizer and a sequencer to play a MIDI file.

The example uses two classes: WorkletSynthesizer class and Sequencer class to play a MIDI file.

simple_demo.html
1
2
3
4
<p id="message">Please wait for the sound bank to load.</p>
<input accept=".mid, .rmi, .xmf, .mxmf" id="midi_input" type="file" />
<!-- note the type="module" -->
<script src="simple_demo.js" type="module"></script>

Info

Note the type="module" in the script tag.

simple_demo.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// Import the modules
import { Sequencer, WorkletSynthesizer } from "../../src/index.js";
import {
    EXAMPLE_SOUND_BANK_PATH,
    EXAMPLE_WORKLET_PATH
} from "../examples_common.js";

// Load the sound bank (your path may vary)
const response = await fetch(EXAMPLE_SOUND_BANK_PATH);
// Load the sound bank into an array buffer
const sfFile = await response.arrayBuffer();
document.querySelector("#message").textContent = "Sound bank has been loaded!";

// Create an audioContext and add the worklet
const context = new AudioContext();
await context.audioWorklet.addModule(EXAMPLE_WORKLET_PATH);
// Create the synthesizer
const synth = new WorkletSynthesizer(context);
synth.connect(context.destination);
// Add the sound bank
await synth.soundBankManager.addSoundBank(sfFile, "main");
// Create the sequencer
const seq = new Sequencer(synth);

// Make it loop
seq.loopCount = Infinity;

// Add an event listener for the file inout
document
    .querySelector("#midi_input")
    .addEventListener("change", async (event) => {
        // Audio context may only be resumed after user interaction
        await context.resume();
        /**
         * Check if any files are added
         * @type {HTMLInputElement}
         */
        const input = event.target;
        if (!input.files[0]) {
            return;
        }
        const midiFile = await input.files[0].arrayBuffer(); // Get the file and convert to ArrayBuffer

        // Load a new song list and play
        seq.loadNewSongList([{ binary: midiFile }]);
        seq.play();
    });

What the script does:

  1. Import the necessary variables
  2. fetch-es the sound bank file
  3. Initializes an AudioContext and adds the worklet
  4. Initializes WorkletSynthesizer instance
  5. Adds a sound bank to the synthesizer
  6. Initializes a Sequencer instance and connects it to the WorkletSynthesizer
  7. Adds an EventListener for the file input:
    • Loads the selected MIDI file into the song list
    • Starts the playback via sequencer.play()

It's that simple!