RenJS


start:
  - call MidiPlayer: clairdelune
  - show street_morning:
  - ambient SAKURA:
  - show deuzi: normal AT CENTER WITH FADE
  - text: A Midi file (.MID or .MIDI extension) is a Musical Instrument Digital Interface file.
  - text: Unlike regular audio files like MP3s or WAVs, these don't contain actual audio data and are therefore much smaller in size. 
  - text: They instead explain what notes are played, when they're played, and how long or loud each note should be.
  - text: The midi player plugin uses the js library ToneJS to play the sounds for us directly in the browser.
  - text: The current music playing, Clair de Lune by Debussy, is a midi file of only 15kb!
  - deuzi says happy: Isn't it beautiful? Let's stay and listen some more!
  - text: To stop the sound, call the midi player plugin again, with the keyword (bold)stop(end), and that's it!
  - call MidiPlayer: stop
  - ambient CLEAR:
  - endgame:

In index.html, you need to load two extra libraries, that the plugin needs to work ToneJS, and ToneJS-Midi. You can link these libraries directly from the cdn, or download them and load them from your local game folder.


<script type="text/javascript" src="https://unpkg.com/tone@latest/build/Tone.js"></script>
<script type="text/javascript" src="https://unpkg.com/@tonejs/midi"></script>
<script src="assets/libs/MidiPlayer.js"></script>


class MidiPlayer extends RenJS.Plugin {

    synths = [];
    midis = {};

    onInit() {
        
        const binaryLoadCallback = (key, data) => {
            // Convert our binary file into a Uint8Array
            const binarydata = new Uint8Array(data);
            // Convert the binary array to json
            this.midis[key] = new Midi(binarydata);
            return binarydata
        }
        //preload your midis here
        this.game.load.binary('clairdelune', 'assets/audio/clair-de-lune.mid', binaryLoadCallback, this.game);
        this.game.load.start();
    }

    onCall(params) {
        if (params.body == "stop"){
            this.stopMidi();
        } else {
            this.playMidi(params.body);
        }
        this.game.resolveAction();
    }

    playMidi(key){
        const now = Tone.now() + 0.5;

        this.midis[key].tracks.forEach((track) => {
            //create a synth for each track
            const synth = new Tone.PolySynth(Tone.Synth, {
                envelope: {
                    attack: 0.02,
                    decay: 0.1,
                    sustain: 0.3,
                    release: 1,
                },
            }).toDestination();
            // lower the volume a bit, or use the user volume
            // this.game.userPreferences.get('bgmv')
            synth.volume.value = -20;

            this.synths.push(synth);
            //schedule all of the events
            track.notes.forEach((note) => {
                if (note.duration>0){
                    synth.triggerAttackRelease(
                        note.name,
                        note.duration,
                        note.time + now,
                        note.velocity
                    );
                }
            });
        });
    }

    stopMidi(){
        while (this.synths.length) {
            const synth = this.synths.shift();
            synth.disconnect();
        }
    }
}

RenJSGame.addPlugin('MidiPlayer',MidiPlayer)

Midi Player Plugin