Member Avatar for veledrom

Hi,
When i click on a link in my html page, it will play xxx.midi. How do we do this?
Thanks

  • 4 Contributors
  • 5 Replies
  • 92 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short answer: use the HTML5 audio APIs or a client-side MIDI synthesizer. wanted a sound on link click — older suggestions in the thread (Flash, aural CSS) are not reliable today: Flash is end-of-life and aural CSS was never widely implemented. Use a small audio file (MP3/OGG) and play it with the audio element and a click handler, or if you must play a .mid file, either convert it server-side or use a JS synth library.

A minimal, robust workflow:

  1. Convert the MIDI to a common audio format (MP3/OGG) on the server or in a DAW (FFmpeg or a MIDI-to-audio render).
  2. Put the audio on the page with audio and call .play() from the link click handler. Browsers require a user gesture to start playback and play() returns a Promise, so handle failures.

Example (conceptual):

<a href="#" id="playLink">Play</a>
<audio id="sfx" preload="auto">
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.mp3" type="audio/mpeg">
</audio>

<script>
document.getElementById('playLink').addEventListener('click', function(e){
  e.preventDefault();
  var a = document.getElementById('sfx');
  a.currentTime = 0;
  a.play().catch(function(err){ console.warn('Playback blocked:', err); });
});
</script>

If keeping the file as MIDI is required, use a client-side synthesizer such as MIDI.js to render MIDI via WebAudio, or handle MIDI playback through the Web MIDI API for connected devices (these are different problems). References: MDN on the audio element and play() behavior (audio element, HTMLMediaElement.play()), the MIDI.js project (MIDI.js), and general FFmpeg tools (FFmpeg).

Recommended Answers

All 5 Replies

Member Avatar for tiger86

that sounds more like something you would have to do in flash with actionscript I do not think that is possible with html.

Member Avatar for lio04

Sure, see the cue property in CSS.

I don't know, why is this possible in all browsers, but in new browsers it could be possible.

Member Avatar for tiger86

that is aural css which is not yet recognized by all browsers I will see if it is possible in regular css.

Member Avatar for tiger86

I would try the css code @import aural all browsers recognize it except oldies like internet explorer 4

Member Avatar for MidiMagic

Aural css was never implemented enough to be used, and is now deprecated.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.