播放聲音後減少延遲？

我在試着製作一個網站（使用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

播放聲音後減少延遲？

回答

相關問題