1

I never thought, I'd have to ask THIS question:

Is there a cross-browser way to play background MIDI files in a website without the need for a plugin?

(Now, please don't answer with "don't do it! it's annoying as hell!". It's for a kids-page and they love this stuff... And I will give the option to turn it on or off...)

I've found several approaches, each with their own problems:

  • <bgsound ...>-tag: IE only; must be careful not to use with other tag that IE might interpret also
  • <embed ...>-tag: Doesn't work in Chrome. Firefox requires a plugin, which it can't even install automatically...
  • <object ...>-tag: Chrome and Firefox require a plugin. Both suggest QuickTime, but neither installs it correctly...
  • <audio ...>-tag: Requires HTML 5; also not sure if it supports MIDI across browsers...
  • use a Java applet: Not available everywhere, and seems like overkill

Is there some way to make this work across browsers (minimum: current Firefox, Chrome, Safari, Opera, IE6+, Android, iOS) without requiring any plugins? Probably some clever mix of all the tags listed above?

I am really surprised that this seems to be so difficult. Is MIDI deprecated? Or background-audio in websites in general?

Markus A.
  • 12,349
  • 8
  • 52
  • 116

2 Answers2

0

Why not HTML 5 Audio. After all it is supported in all latest browsers. ( Firefox/Opera can have problem with H.264 files ). And in case of Mobile browsers it should more better choice.

kuldeep.kamboj
  • 2,566
  • 3
  • 26
  • 63
  • Why not, IE 9 above happily done this. Or you have older version ? – kuldeep.kamboj Apr 08 '13 at 11:12
  • 2
    I'd like to support IE 6+ (as mentioned in the question). Does the audio tag support .MID in all browsers? – Markus A. Apr 08 '13 at 11:17
  • Also you can try this link if it helps you http://stackoverflow.com/questions/5789734/does-the-html5-audio-tag-encompass-mid-midi-unofficially – kuldeep.kamboj Apr 08 '13 at 11:17
  • Well for older browsers, I am afraid you need more a audio playback library wrapper. As all technologies regarding this have different support level. – kuldeep.kamboj Apr 08 '13 at 11:19
  • You want no plugins, but yet want to support IE6+? – klewis Apr 08 '13 at 17:57
  • 1
    @blachawk Not sure why that shouldn't make sense. I'm always hesitant to install anything on my computer simply because some website requires it. Especially something as intrusive as QuickTime (which messes with file associations, for example), which unfortunately is the default plugin for the ``-tag as suggested by Firefox and Chrome. Also, installing a plugin takes time and is just annoying. And IE6 through IE8 (the ones that don't support HTML 5 Audio) are still quite popular (as popular as Safari and Opera combined, btw!): http://www.w3schools.com/browsers/browsers_stats.asp – Markus A. Apr 09 '13 at 09:40
  • ok, now its a bit more clear when you say you want no plugin, you mean not making the web site visitor have special features installed on their machine, just to hear your midi sound. – klewis Apr 09 '13 at 12:58
0

One option you may want to pursue is SoundManager2. An audio project based on JavaScript. I use it in many of my web projects and so far it seems goood. Requires a little bit of a learning curve, but the API is very rich and clear and how to install it and use it for various situations.

http://www.schillmania.com/projects/soundmanager2/

By building a JavaScript package for audio within your web site, you won't have to worry about additional plug-ins that front-end users may need to have for their machines. It works with old and new browsers, MIDI files, MP3's and more.

klewis
  • 7,459
  • 15
  • 58
  • 102
  • That does look like an interesting project, but it seems to use Flash as a fall-back if HTML 5 is not available. Most people have Flash installed already, but if not, I would end up requiring a plugin in this case also. ;) – Markus A. Apr 09 '13 at 14:21
  • You don't need to implement the flash fallback in this project. It's optional. Actually you can disable that if you want. This is a very fluid and flexible project, and blends in well with some top JavaScript frameworks out there. Like I said, you just need to put in some time to learn JavaScript (i.e. creating objects, calling functions, accessing properties). Once you have a basic handle on this, you can go really far with this project. – klewis Apr 09 '13 at 14:43