examples/Basic.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <!-- polyfill -->
    <script src="../inc/shim/Base64.js" type="text/javascript"></script>
    <script src="../inc/shim/Base64binary.js" type="text/javascript"></script>
    <script src="../inc/shim/WebAudioAPI.js" type="text/javascript"></script>
    <!-- midi.js package -->
    <script src="../js/midi/audioDetect.js" type="text/javascript"></script>
    <script src="../js/midi/gm.js" type="text/javascript"></script>
    <script src="../js/midi/loader.js" type="text/javascript"></script>
    <script src="../js/midi/plugin.audiotag.js" type="text/javascript"></script>
    <script src="../js/midi/plugin.webaudio.js" type="text/javascript"></script>
    <script src="../js/midi/plugin.webmidi.js" type="text/javascript"></script>
    <!-- utils -->
    <script src="../js/util/dom_request_xhr.js" type="text/javascript"></script>
    <script src="../js/util/dom_request_script.js" type="text/javascript"></script>
</head>

<body>
    <h1>Random music generation</h1>
    <p>Loading...</p>
    <img src="http://www.khalilicollections.org/wp-content/themes/bateaux/ajax-loader.gif" alt="" class="loading" width="30px" height="30px">
    <style>
        body {
            font-family: 'Raleway', sans-serif;
            background-color: #404142;
            color: white;
        }
        
        .loading {
            position: relative;
            display: flex;
            justify-content: center;
            align-self: center;
        }
        
        h1 {
            display: flex;
            justify-content: center;
        }
        
        p {
            display: flex;
            justify-content: center;
            padding-top: 50vh;
        }
        
        img {
            margin: auto;
        }
    </style>
    <script type="text/javascript">
        let loadingTxt = document.body.querySelector('p');
        console.log(loadingTxt);
        window.onload = function() {
            MIDI.loadPlugin({
                soundfontUrl: "./soundfont/",
                instrument: "acoustic_grand_piano",
                onprogress: function(state, progress) {
                    console.log(state, progress);
                },
                onsuccess: function() {
                    document.body.querySelector("img").remove();
                    loadingTxt.textContent = "Playing..."
                    notes = [];
                    let delay = 1; // play one note every quarter second
                    for (i = 0; i < 5; i++) { //BUG

                        var note = 57; // the MIDI note
                        var velocity = 127; // how hard the note hits
                        let chordarr = [50, 53, 57, 60, 64, 67];
                        let chordBase = chordarr[Math.floor((Math.random() * chordarr.length) + 0)];
                        // play the note
                        MIDI.setVolume(0, 127);
                        MIDI.chordOn(0, [chordBase, chordBase + 3, chordBase + 7], velocity, delay);
                        //MIDI.noteOn(0, note, velocity, delay + 1);
                        //MIDI.noteOff(0, note, delay + 1 + 0.75);


                        // play one note every quarter second
                        // play the note
                        //MIDI.noteOn(0, note, velocity, delay);
                        //MIDI.noteOff(0, note, delay + 0.75);
                        delay = delay + 1;
                        /*var delay = 0; // play one note every quarter second
                        var note = 50; // the MIDI note
                        var velocity = 127; // how hard the note hits
                        // play the note
                        MIDI.setVolume(0, 127);
                        MIDI.noteOn(0, note, velocity, delay);
                        MIDI.noteOff(0, note, delay + 0.75);*/
                    }

                }
            });
        };
    </script>
</body>

</html>