Question

Pygame MIDI Playback from Dockerfile Deployment

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!

Sign In or Sign Up to Answer

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
Site Moderator badge
• 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.

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up