播放声音后减少延迟？

我在试着制作一个网站（使用JavaScript），它有按钮，如果有人点击它，它会播放声音。播放声音后减少延迟？

但事情是当我点击按钮，它等待（我猜加载）几秒钟，然后播放声音。如果声音说“你好”，并且有人经常点击它，我想让它播放“他 - 他 - 他 - 他 - 你好”。

按钮是.png，我也有按动按钮的动画。

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

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

来源

2012-10-22 TKP

你还没有包含与这个问题相关的唯一的按钮和音频代码。按钮加载功能不太可能成为问题的一部分。更有可能您只在点击时加载音频内容，而应直接在页面中加载。请包括所有相关的代码。 – jbn

每次你在嵌入声音时都需要重新加载，所以你很可能总是得到延迟，你将不得不预先加载声音 - 我还建议使用像SoundManager2这样的播放器。 – Goose

为什么不预加载声音呢？使用带有唯一ID的嵌入标签，然后document.geElementById（“unique”）。play（） –

哇，真的有必要吗？ 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>

我已经完全重新编写代码把它弄出来最后千禧，进入今天。如果您需要帮助了解它的工作原理，请告诉我一个具体问题。

来源

2012-10-22 20:42:39

我真的不完全明白一切。我看到你有变量和循环来删除重复，我有想法是什么儿童/兄弟的属性做，但窗户从哪里来的？我也测试了代码，但是当我点击图片时它没有做任何事情。 – TKP

我在发布后不久编辑了答案。您可能正在使用旧版本的代码，但确实存在一些错误。它现在应该工作。 –

好吧，我看到代码上做出的一些更改。我GOOGLE了Windows，我猜这是一个JavaScript的全球对象。我在不同的浏览器中再次测试了代码，现在看起来工作正常。谢谢 – TKP

播放声音后减少延迟？

回答

相关问题