bsperan
08-19-2006, 04:30 PM
While designing a website for personal/hobby use I decided that I needed background music to add some pizzaz. And since I only have dial-up, I went with MIDI. Besides, there are many MIDIs available which are either public domain or usable for non-commercial applications.
Right away, though, I had problems with most of the HTML embeded music tutorials I read. It seems HTML tutorials can become dated quickly as browsers become more mature with the release of later versions.
Among many others, I tried the code on the Music Code Tutorial (http://www.tizag.com/htmlT/music-code.php) on Tizag.com. The demo page does always plays music, regardless of whether I use MS IE 6.0 (SP1) or Opera v9.0. However, whenever I view the page in Opera nothing appears in the boxes. No media player controls appear and so I'm unable to pause the music, change volume, etc. And I had the same problems implementing "<embed src" in my website.
After considerable trial and effort, I found something that works in both IE and Opera:
<EMBED src=SPACE.MID width=300 height=42 type=application/x-mplayer2
volume="-9" PlayCount="5" controller="true">
I had played with many, many other varables such as ShowControls, ShowDisplay, ShowAudioControls, ShowPositionControls, DisplayMode, Enabled, EnableContextMenu and others. But while EMBED will display controls by default in MS IE, it seems it will not do so in Opera unless controller="true". Which seems a bit strange since most tutorials failed to mention that parameter at all. The few that did only used it in their examples for using <EMBED to play VIDEO files with QuickTime of all things! Even more confusing, when trying to implement this with Javascript, some browsers must find certain parameters set with either "-1" or "1" instead of "true" and "0" instead of "false".
Unfortunately, that was not the end of my problems.
Here's an example:
<embed src="beethoven.mid" autostart="false" loop="false"
volume="60" />
I tried setting volume to "60" as well as some other values, but (as least in my case) in Opera the result seemed to be a volume so low that it was barely audible. Instead, I found that a NEGATIVE volume works properly in Opera. For example, volume="-40" would result in the volume slider set to 60% (100 - 40). As a bonus, this also seems to work in MS IE.
Also, some music code examples I found had crazy dimensions like width="360" and height="165". Why? If it's just to play music and not a video file, either 42 or 45 is plenty for height. Or, if the "showstatusbar" attribute is set to "true", then 69 would be enough. And for my uses, 300 is wide enough.
In searching for answers, I read many different tutorials on many websites. But I found the following article in parcticular to be useful for my problems:
O'Reilly Digital Media > Build a Better Web Audio Player (http://digitalmedia.oreilly.com/pub/a/oreilly/digitalmedia/2006/05/31/build-a-better-web-audio-player.html?page=1)
I'm posting this here as I thought I should share what I had learned the hard way. I don't know what it has to be so difficult to embed music for different browsers. Perhaps it's because <EMBED was never officially accepted as an HTML standard? But even replacing that with <OBJECT will still cause problems for certain OS and browser combinations. Which is why many now advocate that an <EMBED code be embedded in an <OBJECT to ensure backwards compatibility should the <OBJECT fail to function.
Here's what I use:
<HTML><HEAD><TITLE>Your Title Here</TITLE>
<SCRIPT language=JavaScript>
<!--
function embPlayer() {
// 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"; // MIME type for non-IE browsers on Windows
if (visitorOS != "Windows") { objTypeTag = "audio/mpeg"}; // MIME type for Linux & Mac
document.writeln("<object width='300' height='42'>");
document.writeln("<param name='type' value='" + objTypeTag + "'>");
document.writeln("<param name='src' value='SOMEMUSIC.MID'>");
document.writeln("<param name='autoplay' value='true'>");
document.writeln("<param name='autostart' value='1'>");
document.writeln("<param name='volume' value='-9'>");
document.writeln("<param name='controller' value='1'>");
document.writeln("<param name='PlayCount' value='7'>");
document.writeln("<EMBED src=SOMEMUSIC.MID type='" + objTypeTag + "' autoplay='true' autostart='-1' width=300 height=42 volume='-9' controller='1' PlayCount='7'></EMBED>");
document.writeln("</object>");
document.close(); // Finalize document
}
// -->
</SCRIPT>
<BODY>
<IMG alt="" src="somepic.gif"><BR>
<SCRIPT language=JavaScript>
embPlayer();
</SCRIPT>
<NOSCRIPT>
<EMBED src=SOMEMUSIC.MID width=300 height=42 type=application/x-mplayer2
volume="-9" PlayCount="7" controller="true"></EMBED>
</NOSCRIPT>
</BODY>
</HTML>
As a bonus, since the <IMG tag is before the <SCRIPT, it appears as if the image is part of the music player. The above is mostly a version of that found on the 3rd page of Build a Better Web Audio Player (http://digitalmedia.oreilly.com/pub/a/oreilly/digitalmedia/2006/05/31/build-a-better-web-audio-player.html?page=1), customized to my needs. Notice that this code changes the MIME type depending upon the OS instead of preventing music from functioning on non-Windows systems. Also, it does not prevent it from running on browsers other than IE. And even if the browser does not support Javascript (or has it turned off) then the <NOSCRIPT> code will activate.
Right away, though, I had problems with most of the HTML embeded music tutorials I read. It seems HTML tutorials can become dated quickly as browsers become more mature with the release of later versions.
Among many others, I tried the code on the Music Code Tutorial (http://www.tizag.com/htmlT/music-code.php) on Tizag.com. The demo page does always plays music, regardless of whether I use MS IE 6.0 (SP1) or Opera v9.0. However, whenever I view the page in Opera nothing appears in the boxes. No media player controls appear and so I'm unable to pause the music, change volume, etc. And I had the same problems implementing "<embed src" in my website.
After considerable trial and effort, I found something that works in both IE and Opera:
<EMBED src=SPACE.MID width=300 height=42 type=application/x-mplayer2
volume="-9" PlayCount="5" controller="true">
I had played with many, many other varables such as ShowControls, ShowDisplay, ShowAudioControls, ShowPositionControls, DisplayMode, Enabled, EnableContextMenu and others. But while EMBED will display controls by default in MS IE, it seems it will not do so in Opera unless controller="true". Which seems a bit strange since most tutorials failed to mention that parameter at all. The few that did only used it in their examples for using <EMBED to play VIDEO files with QuickTime of all things! Even more confusing, when trying to implement this with Javascript, some browsers must find certain parameters set with either "-1" or "1" instead of "true" and "0" instead of "false".
Unfortunately, that was not the end of my problems.
Here's an example:
<embed src="beethoven.mid" autostart="false" loop="false"
volume="60" />
I tried setting volume to "60" as well as some other values, but (as least in my case) in Opera the result seemed to be a volume so low that it was barely audible. Instead, I found that a NEGATIVE volume works properly in Opera. For example, volume="-40" would result in the volume slider set to 60% (100 - 40). As a bonus, this also seems to work in MS IE.
Also, some music code examples I found had crazy dimensions like width="360" and height="165". Why? If it's just to play music and not a video file, either 42 or 45 is plenty for height. Or, if the "showstatusbar" attribute is set to "true", then 69 would be enough. And for my uses, 300 is wide enough.
In searching for answers, I read many different tutorials on many websites. But I found the following article in parcticular to be useful for my problems:
O'Reilly Digital Media > Build a Better Web Audio Player (http://digitalmedia.oreilly.com/pub/a/oreilly/digitalmedia/2006/05/31/build-a-better-web-audio-player.html?page=1)
I'm posting this here as I thought I should share what I had learned the hard way. I don't know what it has to be so difficult to embed music for different browsers. Perhaps it's because <EMBED was never officially accepted as an HTML standard? But even replacing that with <OBJECT will still cause problems for certain OS and browser combinations. Which is why many now advocate that an <EMBED code be embedded in an <OBJECT to ensure backwards compatibility should the <OBJECT fail to function.
Here's what I use:
<HTML><HEAD><TITLE>Your Title Here</TITLE>
<SCRIPT language=JavaScript>
<!--
function embPlayer() {
// 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"; // MIME type for non-IE browsers on Windows
if (visitorOS != "Windows") { objTypeTag = "audio/mpeg"}; // MIME type for Linux & Mac
document.writeln("<object width='300' height='42'>");
document.writeln("<param name='type' value='" + objTypeTag + "'>");
document.writeln("<param name='src' value='SOMEMUSIC.MID'>");
document.writeln("<param name='autoplay' value='true'>");
document.writeln("<param name='autostart' value='1'>");
document.writeln("<param name='volume' value='-9'>");
document.writeln("<param name='controller' value='1'>");
document.writeln("<param name='PlayCount' value='7'>");
document.writeln("<EMBED src=SOMEMUSIC.MID type='" + objTypeTag + "' autoplay='true' autostart='-1' width=300 height=42 volume='-9' controller='1' PlayCount='7'></EMBED>");
document.writeln("</object>");
document.close(); // Finalize document
}
// -->
</SCRIPT>
<BODY>
<IMG alt="" src="somepic.gif"><BR>
<SCRIPT language=JavaScript>
embPlayer();
</SCRIPT>
<NOSCRIPT>
<EMBED src=SOMEMUSIC.MID width=300 height=42 type=application/x-mplayer2
volume="-9" PlayCount="7" controller="true"></EMBED>
</NOSCRIPT>
</BODY>
</HTML>
As a bonus, since the <IMG tag is before the <SCRIPT, it appears as if the image is part of the music player. The above is mostly a version of that found on the 3rd page of Build a Better Web Audio Player (http://digitalmedia.oreilly.com/pub/a/oreilly/digitalmedia/2006/05/31/build-a-better-web-audio-player.html?page=1), customized to my needs. Notice that this code changes the MIME type depending upon the OS instead of preventing music from functioning on non-Windows systems. Also, it does not prevent it from running on browsers other than IE. And even if the browser does not support Javascript (or has it turned off) then the <NOSCRIPT> code will activate.