How to create an audio fade-in effect for embedded Windows Media Player

  • Article

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>