Report this

What is the reason for this report?

Pygame MIDI Playback from Dockerfile Deployment

Posted on January 6, 2023

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!



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.
0

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.

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.