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

您应该定义case isMozilla :由于许多浏览器都在使用UserAgent：Mozilla等...不仅是firefox浏览器本身，因此，如果您使用的是chrome或其他类型的OS浏览器，它们可能会从脚本中加载几种情况。