Recently this question was asked of me. How to do a fade-in effect for audio files. I assumed media player had a built in function to cover fading audio in and out when it starts. I looked, looked some more, looked harder and finally gave up. There didn't seem to be a way to do it. So I came up with my own way.This code sample increments the volume over time in increments of half a second. You need only paste the code into an HTML page and change the line Player.URL = "Goldfish.avi"; to point to your media content. Enjoy!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML XMLNS:t="urn:schemas-microsoft-com:time"><HEAD><TITLE>volume / mute Property</TITLE><?IMPORT namespace="t" implementation="#default#time2"> <STYLE> .time{ behavior: url(#default#time2);}</STYLE><script type="text/javascript" language="JavaScript"><!-- This code accomplishes the delay functionality --> /** constructor @param duration integer seconds @param <optional> function to run while waiting. */ function Pause(duration, busy){ this.duration= duration * 1000; this.busywork = null; // function to call while waiting. this.runner = 0; if (arguments.length == 2) { this.busywork = busy; } this.pause(this.duration); } // Pause class /** pause method @param duration: integer in seconds */ Pause.prototype.pause = function(duration){ if ( (duration == null) || (duration < 0)) {return;} var later = (new Date()).getTime() + duration; while(true){ if ((new Date()).getTime() > later) { break; } this.runner++; if (this.busywork != null) { this.busywork(this.runner); } } // while } // pause method function Play() {<!-- This function increases the volume with a delay of .5 seconds between each increase --> if (Player.playstate == 3){ for (i = 0; i < 10; i++) { var p = new Pause(.5); Player.settings.volume = Player.settings.volume + 5; } } else { alert("Not hit"); } alert(Player.settings.volume); }function go(){<!-- This code starts the embedded player playing. Substitute the name of your media file in the --><!-- first line below --> Player.URL = "Goldfish.avi"; Player.controls.Play(); return;}Player.on</SCRIPT> </HEAD><BODY><P><OBJECT ID="Player" width="320" height="300" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"><PARAM name = "Volume" value="1"> <PARAM name = "AutoStart" value="-1"><param name="URL" value=""><param name="rate" value="1"><param name="balance" value="0"><param name="currentPosition" value="0"><param name="defaultFrame" value=""><param name="playCount" value="1"><param name="currentMarker" value="0"><param name="invokeURLs" value="-1"><param name="baseURL" value=""><param name="mute" value="0"><param name="uiMode" value="full"><param name="stretchToFit" value="0"><param name="windowlessVideo" value="0"><param name="enabled" value="-1"><param name="enableContextMenu" value="-1"><param name="fullScreen" value="0"><param name="SAMIStyle" value=""><param name="SAMILang" value=""><param name="SAMIFilename" value=""><param name="captioningID" value=""><param name="enableErrorDialogs" value="0"></OBJECT> <SCRIPT LANGUAGE = "JScript" FOR = "Player" EVENT = "PlayStateChange(NewState);"> if(3 == NewState) { Play(); }</SCRIPT><BR><BR><INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="Play" accesskey=p OnClick="go()"> </BODY></HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML XMLNS:t="urn:schemas-microsoft-com:time"><HEAD><TITLE>volume / mute Property</TITLE><?IMPORT namespace="t" implementation="#default#time2">
<STYLE> .time{ behavior: url(#default#time2);}</STYLE><script type="text/javascript" language="JavaScript"><!-- This code accomplishes the delay functionality --> /** constructor @param duration integer seconds @param <optional> function to run while waiting. */ function Pause(duration, busy){ this.duration= duration * 1000; this.busywork = null; // function to call while waiting. this.runner = 0;
if (arguments.length == 2) { this.busywork = busy; }
this.pause(this.duration);
} // Pause class
/** pause method @param duration: integer in seconds */ Pause.prototype.pause = function(duration){ if ( (duration == null) || (duration < 0)) {return;}
var later = (new Date()).getTime() + duration;
while(true){ if ((new Date()).getTime() > later) { break; }
this.runner++;
if (this.busywork != null) { this.busywork(this.runner); }
} // while
} // pause method
function Play() {<!-- This function increases the volume with a delay of .5 seconds between each increase --> if (Player.playstate == 3){ for (i = 0; i < 10; i++) { var p = new Pause(.5); Player.settings.volume = Player.settings.volume + 5; } } else { alert("Not hit"); } alert(Player.settings.volume); }function go(){<!-- This code starts the embedded player playing. Substitute the name of your media file in the --><!-- first line below -->
Player.URL = "Goldfish.avi"; Player.controls.Play(); return;}Player.on</SCRIPT>
</HEAD><BODY><P><OBJECT ID="Player" width="320" height="300" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"><PARAM name = "Volume" value="1"> <PARAM name = "AutoStart" value="-1"><param name="URL" value=""><param name="rate" value="1"><param name="balance" value="0"><param name="currentPosition" value="0"><param name="defaultFrame" value=""><param name="playCount" value="1"><param name="currentMarker" value="0"><param name="invokeURLs" value="-1"><param name="baseURL" value=""><param name="mute" value="0"><param name="uiMode" value="full"><param name="stretchToFit" value="0"><param name="windowlessVideo" value="0"><param name="enabled" value="-1"><param name="enableContextMenu" value="-1"><param name="fullScreen" value="0"><param name="SAMIStyle" value=""><param name="SAMILang" value=""><param name="SAMIFilename" value=""><param name="captioningID" value=""><param name="enableErrorDialogs" value="0"></OBJECT> <SCRIPT LANGUAGE = "JScript" FOR = "Player" EVENT = "PlayStateChange(NewState);"> if(3 == NewState) { Play(); }</SCRIPT><BR><BR><INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="Play" accesskey=p OnClick="go()">
</BODY></HTML>