Play Midi File from URL

Hi everyone,
I would be interested if someone knows how to play a Midi file through Anvil. I have searched through the threads here for guides on playing audio and already found some valuable resources, but I am still short of the last step.

My steps so far are:

  • a midi file on my PC
  • which is passed as a media object to anvil
  • where it is stored in a data table
  • from which I am able to access the URL

If i follow this process, I can play an Mp3 with solutions that people have suggested for playing audio in other threads, but since Midi is not audio, I am not quite sure what I will need to get the Midi file (where I have the URL) to play. What I am missing is probably the Javascript part for playing a Midi file. Can anyone suggest something that will work in Anvil?

Hi @a0b1,

If existing forum ideas haven’t solved it and it’s not straight forward with native javascript - then I’d probably look around for a javascript library that has solved this problem and then consider writing a custom component to allow it to work with anvil.

there are probably a few out there - here’s one that looks promising

3 Likes

Thank you very much, that was exactly what I was looking for.

What I did in addition to the above steps now (in case someone else is interested in this thread in the future and a javascript+Anvil newbie like me):

I added the following under Native Libraries:

<script src="https://cdn.jsdelivr.net/npm/web-midi-player@latest/index.js"></script>

<script>
const { 'web-midi-player': { default: MidiPlayer } } = window;
</script>

<!-- Audio playing -->
<script>
function PlaySound(url) {
  		  const midiPlayer = new MidiPlayer();
		  midiPlayer.play({ url: url });
      } 
</script>

From the client code, I can now access this with

self.call_js('PlaySound', audio_file.url)

Thank you, hope this helps someone else in the future :slight_smile:

2 Likes