New [midi=url]...[/midi] BBCode

Post Reply
User avatar
Dave Keenan
Site Admin
Posts: 2092
Joined: Tue Sep 01, 2015 2:59 pm
Location: Brisbane, Queensland, Australia
Contact:

New [midi=url]...[/midi] BBCode

Post by Dave Keenan »

There's another new button in the post editor. This time it's MIDI . The AUDIO BBCodes don't work for MIDI (.mid) files, because they are not really audio files, but rather a stream of inputs to a synthesizer. So I've implemented MIDI playback using the javascript functions kindly provided free-of-charge by https://www.midijs.net/.

For example:

[midi=https://forum.sagittal.org/download/file.php?id=177]Johnston 10 ii Solemn fragment[/midi]

generates this player, with start and stop buttons, and the duration in seconds:

▶️ ⏹️ Johnston 10 ii Solemn fragment,  s

This is a fragment from the start of Ben Johnston's String Quartet number 10, 2nd movement: Solemn. You can see and hear more of it here: viewtopic.php?f=14&t=106&p=1814#p1814.

You first need to upload the MIDI file you want to play, as an attachment to your post, e.g. by dragging and dropping it into the post editor. Then you will need to obtain the URL of your uploaded file by clicking on the Attachments tab below the edit pane, then right-clicking on the name of your file and choosing Copy link location or similar.
Last edited by cmloegcmluin on Sat Apr 17, 2021 8:48 am, edited 1 time in total.
Reason: http -> https

User avatar
cmloegcmluin
Site Admin
Posts: 1689
Joined: Tue Feb 11, 2020 3:10 pm
Location: San Francisco, California, USA
Real Name: Douglas Blumeyer (he/him/his)
Contact:

Re: New [midi=url]...[/midi] BBCode

Post by cmloegcmluin »

Looks great! Thanks Dave.

User avatar
Dave Keenan
Site Admin
Posts: 2092
Joined: Tue Sep 01, 2015 2:59 pm
Location: Brisbane, Queensland, Australia
Contact:

Re: New [midi=url]...[/midi] BBCode

Post by Dave Keenan »

For those who want to implement this in other forums, here is the pattern, replacement and help line:

[midi={URL}]{TEXT}[/midi]

<script type='text/javascript' src='https://www.midijs.net/lib/midi.js'></script>
<span style="border: 1px solid; border-radius: 2px; padding: 0px 3px 0px 1px; line-height: 1.5;"><a href="#!" onClick="MIDIjs.play('{URL}');">▶️</a> <a href="#!" onClick="MIDIjs.stop();">⏹️</a> {TEXT}, <span id="{URL}"></span> s</span>
<script type='text/javascript'>
MIDIjs.get_duration('{URL}', function(seconds) {document.getElementById('{URL}').innerHTML = Math.round(seconds);});
</script>

Embed controls to play a midi file: [midi=https://file.mid]text[/midi]

Post Reply