3

I'm trying to create a variation of the color piano site at http://mudcu.be/piano/ and am really struggling to find a good working example of how to parse a MIDI file, drawing graphical elements and playing MIDI notes.

Does anyone know how the color piano site was created?

I'm first just trying to get a specific midi file playing - with no luck.

The code below doesn't do anything and it doesn't show an error.

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <!-- polyfill -->
        <script src="static/Base64.js" type="text/javascript"></script>
        <script src="static/Base64binary.js" type="text/javascript"></script>
        <script src="static/WebAudioAPI.js" type="text/javascript"></script>
        <!-- midi.js package -->
        <script src="static/audioDetect.js" type="text/javascript"></script>
        <script src="static/gm.js" type="text/javascript"></script>
        <script src="static/loader.js" type="text/javascript"></script>
        <script src="static/player.js" type="text/javascript"></script>
        <script src="static/event.js" type="text/javascript"></script>
        <script src="static/plugin.audiotag.js" type="text/javascript"></script>
        <script src="static/plugin.webaudio.js" type="text/javascript"></script>
        <script src="static/plugin.webmidi.js" type="text/javascript"></script>
        <!-- jasmid just in case-->
        <script src="static/stream.js"></script>
        <script src="static/midifile.js"></script>
        <script src="static/replayer.js"></script>
        <!-- utils -->
        <script src="static/dom_request_xhr.js" type="text/javascript"></script>
        <script src="static/dom_request_script.js" type="text/javascript"></script>
    </head>
    <body>
    <script type="text/javascript">
        window.onload = function () {
        MIDI.loadPlugin({
        soundfontUrl: "static/",
        instrument: "acoustic_grand_piano",
        callback: function() {
            MIDI.Player.loadFile("static/mario.mid", MIDI.Player.start);
            }
        });
    }

    </script>
    </body>
</html>
Magnilex
  • 11,584
  • 9
  • 62
  • 84
lawrencehagman
  • 471
  • 1
  • 3
  • 16

2 Answers2

1

I tried the latest version today. I use Linux mint os. The examples provided work. Noticed that the examples have "onsuccess" rather than "callback" in the loadPlugin call. Changed that and it worked. btw, I did not use exactly your files, as my paths were different. I copied the head section from the MIDIPlayer.html under examples. Also, if you are testing on the file system without a web-server, the browser may not allow access to other files like the midi file using ajax. This happens with chrome. I used Firefox. The debugging console shows a syntax error in the acoustic piano js but looks like it still works. Intermittently, the sound does not play, and when I open the sound console, I see the volume set to zero for this particular app instance (browser). I increase it and I can hear a sound. not sure why this happens. Another issue with MIDI.js seems to be that it does not support all midi attributes. e.g it fails to play a midi file with lyrics. However, jasmid can handle it. My code looks like :

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>MIDI.js - Sequencing in Javascript.</title>
        <!-- midi.js css -->
        <link href="./css/MIDIPlayer.css" rel="stylesheet" type="text/css" />
        <!-- shim -->
        <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>
        <script src="../inc/shim/WebMIDIAPI.js" type="text/javascript"></script>
        <!-- jasmid package -->
        <script src="../inc/jasmid/stream.js"></script>
        <script src="../inc/jasmid/midifile.js"></script>
        <script src="../inc/jasmid/replayer.js"></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>
        <script src="../js/midi/player.js" type="text/javascript"></script>
        <script src="../js/midi/synesthesia.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>
        <!-- includes -->
        <script src="./inc/timer.js" type="text/javascript"></script>
        <script src="./inc/colorspace.js" type="text/javascript"></script>
        <script src="./inc/event.js" type="text/javascript"></script>
    </head>
    <body>
    <script type="text/javascript">
        window.onload = function () {
        MIDI.loadPlugin({
        soundfontUrl: "./soundfont/",
        instrument: "acoustic_grand_piano",
        onsuccess: function() {
            MIDI.Player.loadFile("minute_waltz.mid", MIDI.Player.start);
            }
        });
    }

    </script>
    </body>
</html>
ballade4op52
  • 2,142
  • 5
  • 27
  • 42
manojmo
  • 76
  • 1
  • 5
0

Use https://github.com/surikov/SSSynthesiser.js

It has access to thousands of virtual instruments. See examples at project page

user1024
  • 1,121
  • 1
  • 9
  • 17