2015-05-01 174 views
2

我想獲得一些按鈕來處理聲音沒有成功。對於我使用的頁面我有它設置爲這樣:有音頻播放點擊

// javascript file for gun tutorial// 
 
window.onload=function() 
 
{ 
 
\t var extraAmmo = 210; 
 
\t var maxAmmo = 30; 
 
\t var currentAmmo = maxAmmo; 
 
\t 
 
\t var extraAmmoHud = document.getElementById("extra-ammo"); 
 
\t var currentAmmoHud = document.getElementById("current-ammo"); 
 
\t 
 
\t var shootButton = document.getElementById("shoot-button"); 
 
\t var unloadButton = document.getElementById("unload-button"); 
 
\t var reloadButton = document.getElementById("reload-button"); 
 
\t \t refreshScreen(); 
 
\t \t 
 
\t shootButton.onclick=function() 
 
\t { 
 
\t \t if(currentAmmo > 0) 
 
\t \t { 
 
\t \t \t currentAmmo--; 
 
\t \t \t refreshScreen(); 
 
\t \t } 
 
\t } 
 
\t unloadButton.onclick=function() 
 
\t { 
 
\t  if (currentAmmo > 0) 
 
\t \t { 
 
      unloadTimer = setTimeout(unloadButton.onclick, 150) 
 
\t   currentAmmo--; 
 
\t   refreshScreen(); 
 
\t  } 
 
\t \t else unloadTimer = null; 
 
\t } 
 
\t reloadButton.onclick=function() 
 
\t { 
 
\t \t var difference = getDifference(); 
 
\t \t if(extraAmmo >= difference) 
 
\t \t { 
 
\t \t \t currentAmmo += difference; 
 
\t \t \t extraAmmo -= difference; 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t currentAmmo += extraAmmo; 
 
\t \t \t extraAmmo -= extraAmmo; 
 
\t \t } 
 
\t \t refreshScreen(); 
 
\t \t 
 
\t \t function getDifference() 
 
\t \t { 
 
\t \t \t return maxAmmo -currentAmmo; 
 
\t \t } 
 
\t } 
 
\t function refreshScreen() 
 
\t { 
 
\t \t extraAmmoHud.innerHTML="Extra Ammo: " + extraAmmo; 
 
\t \t currentAmmoHud.innerHTML="Current Ammo: " + currentAmmo; 
 
\t } 
 
}
<!DOCTYPE HTML> 
 

 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Gun Tutorial</title> 
 
<link rel="stylesheet" type="text/css" href="css/style.css"/> 
 
<script src="js/gun.js"></script> 
 
<audio src="sounds/GunShot.mp3"></audio> 
 
<audio src="sounds/GunShotFullAuto.mp3"></audio> 
 
<audio src="sounds/GunCockingFast.wav"></audio> 
 
</head> 
 

 
<body> 
 
\t <div id="wrapper"> 
 
\t <header id="header"> 
 
\t \t <h1>Welcome to the Gun Show</h1> 
 
\t </header> 
 
\t <div id="content"></div> 
 
\t <form> 
 
\t <div id="boxobuttons"> 
 
\t \t <input type="button" value="Shoot" id="shoot-button" /> 
 
\t \t <input type="button" value="Unload" id="unload-button" /> 
 
\t \t <input type="button" value="Reload" id="reload-button" /> 
 
\t </div> 
 
\t 
 
\t \t <div id="ammo-count"> 
 
\t \t \t <p id="current-ammo"></p> 
 
\t \t \t <p id="extra-ammo"></p> 
 
\t \t </div> 
 
\t </form> 
 
\t <footer> 
 
\t </footer> 
 
\t </div> 
 
</body> 
 
</html>

我想看看我是否需要有聲音充當一個變量,每個變量可再插入到不同的變量(shootButton,unloadButton和reloadButton)中,還是我必須完全分開做一些事情?

回答

1

爲什麼不加載你的聲音只是在JavaScript?

例如:var gunshot = new Audio('GunShot.mp3');

如果你然後讓你的聲音,你可以將它們放在你的代碼之間是這樣的:

shootButton.onclick=function() 
    { 
     if(currentAmmo > 0) 
     { 
      currentAmmo--; 
      gunshot.play(); 
      refreshScreen(); 
     } 
    } 

我希望我回答你的問題與此有關。

+1

感謝輸入托馬斯,給我一個時刻,我會盡快與你,告訴你,如果它工作。 –

+1

它看起來像一個不,暫時,我想說我發現了問題,因爲它可能不喜歡音頻文件在它自己的文件夾(聲音),所以我要將它們移動到打開index.html查看是否有效。 –

+1

將它移動到open.html與index.html工作,現在做同樣的卸載和重新加載 –

0

從這段代碼我不清楚你如何試圖播放你的音頻文件。音頻標籤主要用於嵌入用戶控制的媒體。

如果您正在使用短音頻文件進行幕後操作,我建議您直接使用Web Audio API,理想情況下使用bufferLoader對象爲您的音頻提供服務。這篇文章的前半部分介紹你需要知道的一切:

Getting Started with Web Audio API

+0

呃......當然,如果你不關心W3C標準或支持所有瀏覽器,並且你喜歡複雜性。 '