播放声音播放后，减少延迟

我正在尝试一个具有按钮的网站（使用JavaScript），如果有人单击它，它会播放声音。

但是，当我单击按钮时，它会等待（我想加载）几秒钟，然后播放声音。如果声音说"你好"，而某人不断单击它，我希望它玩" he-he-he-he-he-hello"。

按钮是.pngs，我也有一个动画按钮。

每个代码调用四个函数。那是一个效率问题吗？有人可以建议我更好的方法吗？

<html>
    <body>
<title>Title</title>
 <head>
        <style type="text/css">
         body{
         background: url('noisy_grid.png');
         background-repeat: repeat;
         }
        </style>
    <script language="javascript" type="text/javascript">
 <!--
// 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=
    "<embed src=""+soundfile+"" hidden="true" autostart="true" loop="false" />";
}
 -->
    </script>
 </head>
 <span id="dummy"></span>
<center>
<br>
 <a onMouseDown="pressButton('btn1');" 
      onMouseUp="releaseButton('btn1');" 
      onMouseOut="releaseButton('btn1');" 
      onclick="playSound('sound1.mp3');"><img name=btn1 src="img1_up.png" /></a>
<a onMouseDown="pressButton('btn2');" 
      onMouseUp="releaseButton('btn2');" 
      onMouseOut="releaseButton('btn2');" 
      onclick="playSound('sound2.mp3');"><img name=btn2 src="img2_up.png" /></a>

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

<a onMouseDown="pressButton('btn5');" 
      onMouseUp="releaseButton('btn5');" 
      onMouseOut="releaseButton('btn5');" 
      onclick="playSound('sound5.mp3');"><img name=btn5 src="img5_up.png" /></a>
<a onMouseDown="pressButton('btn6');" 
      onMouseUp="releaseButton('btn6');" 
      onMouseOut="releaseButton('btn'6);" 
      onclick="playSound('sound6.mp3');"><img name=btn6 src="img6_up.png" /></a>
</br>
</center>

    </body>
</html>

哇，真的有必要吗？评估？嵌入？真的？

尝试以下操作：

<!DOCTYPE HTML>
<html> 
<head> 
    <title>Title</title> 
    <style type="text/css"> 
        body{ 
            background: url('noisy_grid.png'); 
            background-repeat: repeat; 
        } 
    </style> 
</head>
<body>
    <center id="container"></center> 
    <script type="text/javascript">
        (function() {
            var images = {}, pressButton, releaseButton, playSound, i, a, aud, img,
                container = document.getElementById('container');
            // preload images
            for( i=1; i<=6; i++) {
                (images[i+'d'] = new Image()).src = "img"+i+"_down.png";
                (images[i+'u'] = new Image()).src = "img"+i+"_up.png";
            }
            // event handlers
            pressButton = function(btn) {
                btn.firstChild.src = images[btn.btnid+'d'].src;
            }
            releaseButton = function(btn) {
                btn.firstChild.src = images[btn.btnid+'u'].src;
            }
            playSound = function(btn) {
                btn.nextSibling.play();
            }
            for( i=1; i<=6; i++) {
                a = document.createElement('a');
                img = document.createElement('img');
                aud = document.createElement('audio');
                if( !aud.canPlayType || aud.canPlayType("audio/mpeg") == ""
                          || aud.canPlayType("audio/mpeg") == "no") {
                    alert("Sorry, your browser does not support MP3.");
                    return;
                }
                a.onmousedown = function() {pressButton(this);};
                a.onmouseup = a.onmouseout = function() {releaseButton(this);};
                a.onclick = function() {playSound(this);};
                a.btnid = i;
                img.src = images[i+'u'].src;
                aud.src = "sound"+i+".mp3";
                container.appendChild(a);
                a.appendChild(img);
                container.appendChild(aud);
            }
        })();
    </script>
</body> 
</html>

我已经完全重写了您的代码，以将其从上一百万到今天。如果您需要帮助理解它的工作原理，请告诉我一个特定的问题。

相关内容

最新更新

热门标签：