Reduce delays after playing a sound onclick?
<p>I'm trying a make a website (using JavaScript) that has buttons and if someone clicks on it, it plays a sound.</p>

<p>But the thing is when I clicked on the button, it waits (I guess loading) for few seconds and then plays the sound.  If the sound says "hello" and someone constantly clicks on it, I want it to play "he-he-he-he-he-hello".</p>

<p>The buttons are .pngs and I also have a animation of pressing buttons.</p>

<p>Each code calls four functions. so is this an efficiency problem? Can someone suggest me better method?</p>

<pre><code>&lt;html&gt;
    &lt;body&gt;
&lt;title&gt;Title&lt;/title&gt;

 &lt;head&gt;
        &lt;style type="text/css"&gt;
         body{
         background: url('noisy_grid.png');
         background-repeat: repeat;
         }
        &lt;/style&gt;

    &lt;script language="javascript" type="text/javascript"&gt;
 &lt;!--
// PRELOADING IMAGES
if (document.images) {
 btn1_down=new Image(); btn1_down.src="img1_down.png"; 
 btn1_up  =new Image(); btn1_up.src  ="imag1_up.png"; 

 btn2_down=new Image(); btn2_down.src="img2_down.png"; 
 btn2_up  =new Image(); btn2_up.src  ="img2_up.png"; 

 btn3_down=new Image(); btn3_down.src="imag3_down.png"; 
 btn3_up  =new Image(); btn3_up.src  ="img3_up.png"; 

  btn4_down=new Image(); btn4_down.src="img4_down.png"; 
 btn4_up  =new Image(); btn4_up.src  ="img4_up.png"; 

  btn5_down=new Image(); btn5_down.src="img5_down.png"; 
 btn5_up  =new Image(); btn5_up.src  ="img5_up.png"; 

  btn6_down=new Image(); btn6_down.src="img6_down.png"; 
 btn6_up  =new Image(); btn6_up.src  ="img6_up.png"; 

}

// EVENT HANDLERS
function pressButton(btName) {
 if (document.images)
  eval('document.'+btName+'.src='+btName+'_down.src');
}
function releaseButton(btName) {
 if (document.images)
  eval('document.'+btName+'.src='+btName+'_up.src');
}

function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
    "&lt;embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" /&gt;";
}

 --&gt;
    &lt;/script&gt;
 &lt;/head&gt;

 &lt;span id="dummy"&gt;&lt;/span&gt;
&lt;center&gt;
&lt;br&gt;
 &lt;a onMouseDown="pressButton('btn1');" 
      onMouseUp="releaseButton('btn1');" 
      onMouseOut="releaseButton('btn1');" 
      onclick="playSound('sound1.mp3');"&gt;&lt;img name=btn1 src="img1_up.png" /&gt;&lt;/a&gt;

&lt;a onMouseDown="pressButton('btn2');" 
      onMouseUp="releaseButton('btn2');" 
      onMouseOut="releaseButton('btn2');" 
      onclick="playSound('sound2.mp3');"&gt;&lt;img name=btn2 src="img2_up.png" /&gt;&lt;/a&gt;


&lt;a onMouseDown="pressButton('btn3');" 
      onMouseUp="releaseButton('btn3');" 
      onMouseOut="releaseButton('btn3');" 
      onclick="playSound('sound3.mp3');"&gt;&lt;img name=btn3 src="img3_up.png" /&gt;&lt;/a&gt;
&lt;/br&gt;
 &lt;br&gt;
&lt;a onMouseDown="pressButton('btn4');" 
      onMouseUp="releaseButton('btn4');" 
      onMouseOut="releaseButton('btn4');" 
      onclick="playSound('sound4.mp3');"&gt;&lt;img name=btn4 src="img4_up.png" /&gt;&lt;/a&gt;


&lt;a onMouseDown="pressButton('btn5');" 
      onMouseUp="releaseButton('btn5');" 
      onMouseOut="releaseButton('btn5');" 
      onclick="playSound('sound5.mp3');"&gt;&lt;img name=btn5 src="img5_up.png" /&gt;&lt;/a&gt;

&lt;a onMouseDown="pressButton('btn6');" 
      onMouseUp="releaseButton('btn6');" 
      onMouseOut="releaseButton('btn'6);" 
      onclick="playSound('sound6.mp3');"&gt;&lt;img name=btn6 src="img6_up.png" /&gt;&lt;/a&gt;
&lt;/br&gt;

&lt;/center&gt;


    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
