advertisement

Article:
  Build a Simple MP3 Player for Your Site
Subject:   MIDI PLAYER
Date:   2008-12-23 05:04:24
From:   Nickname
I need to play midi files on my site. This is my try.


Yahoo! Player, Delicious Player and Flash can't play back the midi files.
This script generates EMBED or BGSOUND code to play back the midi file.
Internet Explorer will use BGSOUND. BGSOUND is only safe way to omit IE7 and IE8 add-on prompt problem.
Only problem: BGSOUND can't use playlist for MIDI files :(
Windows browsers (except for Internet Explorer) will play back the file with the Windows Media Player *plugin*.
Non-Windows browsers (except for Internet Explorer) will play back the file with their standard audio handler for the MIME type audio/mpeg. On Macs, that handler will usually be QuickTime.
Tested on Windows XP with IE6, IE7, IE8, Mozilla Firefox 3, Apple Safari 3, Google Chrome 1 and Opera 9.


>>> MidiPlayer.js


function MidiAudio() {


// Get Operating System
var isWin = navigator.userAgent.toLowerCase().indexOf("windows") != -1


if (isWin) { // Use MIME type application/x-mplayer2
visitorOS="Windows";
} else { // Use MIME type audio/mpeg, audio/x-wav, etc.
visitorOS="Other";
}


var objTypeTag = "application/x-mplayer2"; // The MIME type to load the WMP plugin in non-IE browsers on Windows


if (navigator.appName == 'Microsoft Internet Explorer') {
document.writeln("<BGSOUND SRC='midi/song.mid'>");
document.close(); // Finalizes the document
}


else {
if (visitorOS != "Windows") { objTypeTag = "audio/mpeg"}; // The MIME type for Macs and Linux


document.writeln("<div>");
document.writeln("<object width='280' height='69'>"); // Width is the WMP minimum. Height = 45(WMP controls) + 24 (WMP status bar)
document.writeln("<param name='type' value='" + objTypeTag + "'>");
document.writeln("<param name='src' value='midi/song.mid'>");
document.writeln("<param name='autostart' value='1'>");
document.writeln("<param name='showcontrols' value='1'>");
document.writeln("<param name='showstatusbar' value='1'>");
document.writeln("<embed src ='midi/song.mid' type='" + objTypeTag + "' autoplay='true' autostart='1' width='280' height='69' controller='1' showstatusbar='1' bgcolor='#ffffff'></embed>"); // Firefox and Opera Win require both autostart and autoplay
document.writeln("</object>");
document.writeln("</div>");
document.close(); // Finalizes the document
}
}



>>> popup_music.html


<script src="MidiPlayer.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">MidiAudio();</script>



What you think about this?