Pygame MIDI Playback from Dockerfile Deployment

Hi there,

Just came across this question and happy to see that you’ve got a solution already!

Just sharing your solution here as well in case that anyone else comes across it in the future:

Fortunately, there is an awesome html MIDI player that solved this issue:

html-midi-player

Here is my Flask HTML Template Code:

{% if MIDI_playback %}
    <midi-player
     src="{{  MIDI_playback }}"
     sound-font visualizer="#myPianoRollVisualizer">
    </midi-player>
    <midi-visualizer type="piano-roll" id="myPianoRollVisualizer"
     src="{{  MIDI_playback }}" style="color: white">
    </midi-visualizer>
    <script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es`6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0">
    </script>

An Important Note:

Using the script within this Python Flask App, I ran into this CORS error:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled

The workaround was to specify a CORS configuration in local and production instances.