Question

我正在尝试创建一个包含按钮的网站（使用JavaScript），如果有人点击它，它会发出声音。

但事情就是当我点击按钮时，它会等待（我猜装载）几秒钟，然后播放声音。如果声音说“你好”并且有人经常点击它，我希望它发挥“他 - 他 - 他 - 他 - 他 - 你好”。

按钮是.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>

Answer 1

哇，真的有必要吗？ EVAL？嵌入？ 真的？

试试这个：

<!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>

我已经完全重写了你的代码，以便将其从上一个里程开始，直到今天。如果您需要帮助了解其工作原理，请通过具体问题告诉我。

播放声音onclick后减少延迟？

1 个答案: