0

ボタンがあり、誰かがクリックするとサウンドが再生される Web サイトを (JavaScript を使用して) 作成しようとしています。

しかし、問題は、ボタンをクリックすると、数秒間待機して (読み込み中だと思います)、サウンドが再生されることです。サウンドが「こんにちは」と言って、誰かがそれを絶えずクリックしている場合、「へへへへへへへへへへへへへへへへへへへへへへへへへにへへへにへへにへへててててててててハハハ」を再生したいです。

ボタンは .png で、ボタンを押すアニメーションもあります。

各コードは 4 つの関数を呼び出します。これは効率の問題ですか？誰かが私により良い方法を提案できますか?

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

1 に答える 1

0

うーん、それって本当に必要なの？評価？埋め込みますか? 本当？

これを試して：

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

私はあなたのコードを完全に書き直して、過去千年紀から現在に至るまでコードを書き直しました。それがどのように機能するかを理解するのに助けが必要な場合は、具体的な質問でお知らせください.

于 2012-10-22T20:42:39.257 に答える