Hearing an echo while playing mp3

Question

I'm currently having problems while playing mp3 files on a website.

I'm using the following code to play an mp3 sound:

function playSound(url){

  var userAgent    = navigator.userAgent.toLowerCase();
  var appVersion   = navigator.appVersion.toLowerCase();
  var appName      = navigator.appName.toLowerCase();
  var isOpera      = (userAgent.indexOf('opera') != -1);
  var isIE         = (appName.indexOf('internet explorer') != -1) && !isOpera;

  switch(true)
  {
    case isIE      :
      $("#soundSpan").html(" <bgsound src='"+url+"' />");
      break;
    default        :
      $("#soundSpan").html(" <embed src='"+url+"' type='audio/mpeg' autostart=true repeat=false loop=false hidden=true></embed>");
  }

}

This works fine for me and most of the users, but some users are complaining about hearing an echo. Meaning they are hearing the same sound multiple times(more than twice). The sounds are very short varying from 1 to 6 seconds. According to some users the echo is sometimes so bad they can't understand what is being said (the mp3 files are spoken sentences). The echo usually stops after 2-3 seconds.

I'm sure I'm playing the sound only once and the echo has appeared in different browsers.

Does anyone have an idea how this can happen?

Answer 1

If you're calling playSound in a click handler, could your users be double-clicking? On most browsers, double-click causes two click events to occur (in addition to a dblclick event; example). You might want to build in some hysteresis -- for instance, ignore a second (third, fourth) click on the sound for 500ms after the first click, that sort of thing.

Edit: Example:

var soundsPlayed = {};
function playSound(url){

  var userAgent    = navigator.userAgent.toLowerCase();
  var appVersion   = navigator.appVersion.toLowerCase();
  var appName      = navigator.appName.toLowerCase();
  var isOpera      = (userAgent.indexOf('opera') != -1);
  var isIE         = (appName.indexOf('internet explorer') != -1) && !isOpera;
  var soundPlayed  = soundsPlayed['p:' + url];
  var now          = new Date().getTime();

  // If we haven't played this sound, or we haven't played it in the
  // last half-second, go ahead and play it.
  if (!soundPlayed || (now - soundPlayed) > 500) {

      // Remember when we played it
      soundsPlayed['p:' + url] = now;

      // Play it
      switch(true) // true??
      {
        case isIE      :
          $("#soundSpan").html(" <bgsound src='"+url+"' />");
          break;
        default        :
          $("#soundSpan").html(" <embed src='"+url+"' type='audio/mpeg' autostart=true repeat=false loop=false hidden=true></embed>");
      }
    }
}

Answer 2

You should define case isMozilla : since many browsers are using UserAgent: Mozilla, etc... Not only the firefox browser it self, so if you are using chrome or other kind of OS browsers they might load several cases from your script.