Question

Pygame MIDI Playback from Dockerfile Deployment

Posted on January 6, 2023
DigitalOcean App Platform
Asked by cbradiodrums

Currently, I am trying to figure out how to play audio within a Digital Ocean Dockerfile container. The full writeup is here: https://stackoverflow.com/questions/75035203/pygame-midi-playback-in-paas-from-dockerfile

It is a Python Flask App; currently stuck at this error: pygame.error: ALSA: Couldn’t open audio device: No such file or directory

I’m not sure if this is something I could specify within my Dockerfile, or perhaps a runtime resource / console command I would have to execute after the app is deployed. Thanks!

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Bobby Iliev

Site Moderator

• May 12, 2023

Accepted Answer

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.