Javascript: How to preload audio by Windows Media Player with code sample

In my last article I explained how to preload images by HTML IMG element and javascript. Now I am going to show you the way to preload the audio.

This skill is used for one of our client. In the SCORM course we created for this client there are lots of background audio clips. Our client want the audio could be playing automatically without any delay when user go into the particular page, which means we have to preload all the audio clips at the very beginning for further using. In this case, I am using Windows Media Player to preload all the audios.

To do so, obviously we have to create a WMP object, hide it, set its autostart parameter to ture and set its mute to true. And then in the HTML page onload event, we transfer all the audio clip files one by one to the media player, and monitor the downloaded percentage and current status values of media player to refresh the progress bar. If the media player downloaded 100% I will send another audio to it.

There are two things I have to say. One is the media player downloading and buffering only happened after the HTML page onload event, because before that there is no WMP object at all. This thing is different with image preload rule because the IMG element is a internal HTML object but WMP is not. Another thing is there are two confusing events in WMP, buffering and downloading. In sample way, buffering could be fired more than once but downloading only be fired once and it will stop when WMP downloaded 100% of current file. So downloading is exactly the event we should take care of.

The link followed is a full function sample to preload images and a audio clip (singing in the rain) to your local machine by javascript and WMP, which is my personal album. Please click my album to try it. It is fully tested on IE7 and Firefox2.

The coding below is the key function to monitor media player running status.

var _currPrecent = 0;
function mediaDetector()
{ 
  var oWMP = document.getElementById("WMP"); 
  if (oWMP.playState == 10) {// state Ready means current URL is unavailable 
    window.clearInterval(_tId); 
    _tId = 0; 
    if (_currMedia >= _totalMedia) { 
      document.getElementById("icontext").innerHTML = _sProgress+"Media Loading... 100%"; 
      window.setTimeout("reLocateHTML()",1000); 
      return; 
    } 
    else { 
      reloadMedia(); 
    } 
  } 
  if (_mediaBuffering && oWMP.network.downloadProgress == 100) { 
    window.clearInterval(_tId); 
    _tId = 0; 
    _mediaBuffering = 0; 
    if (_currMedia >= _totalMedia) { 
      document.getElementById("icontext").innerHTML = _sProgress+"Media Loading... 100%"; 
      window.setTimeout("reLocateHTML()",1000); 
      return; 
    } 
    else { 
      reloadMedia(); 
    } 
  } 
  if (_currPrecent <= oWMP.network.downloadProgress || _currPrecent == 100) { 
    _currPrecent = oWMP.network.downloadProgress; 
    document.getElementById("icontext").innerHTML = _sProgress+"Media Loading... " 
      +Math.round(((_currMedia-1)/_totalMedia)*100)+"%<br/>" 
      +"--Media file "+_currMedia
      +"(total "+_totalMedia+")... "+oWMP.network.downloadProgress+"%";    
  }
}