Javascript 减少播放声音onclick后的延迟？
我正在尝试制作一个有按钮的网站（使用JavaScript），如果有人点击它，它就会播放声音 但问题是，当我点击按钮时，它会等待（我猜是加载）几秒钟，然后播放声音。如果声音说“你好”，有人不断点击它，我希望它播放“你好” 按钮是。pngs和我还有一个按钮的动画 每个代码调用四个函数。那么这是一个效率问题吗？有人能给我推荐更好的方法吗Javascript 减少播放声音onclick后的延迟？,javascript,Javascript,我正在尝试制作一个有按钮的网站（使用JavaScript），如果有人点击它，它就会播放声音 但问题是，当我点击按钮时，它会等待（我猜是加载）几秒钟，然后播放声音。如果声音说“你好”，有人不断点击它，我希望它播放“你好” 按钮是。pngs和我还有一个按钮的动画 每个代码调用四个函数。那么这是一个效率问题吗？有人能给我推荐更好的方法吗 <html> <body> <title>Title</title> <head>
<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>
标题
身体{
背景：url（'noised_grid.png'）；
背景重复：重复；
}
哇，真的有必要吗？评估？嵌入真的吗
试试这个：
<!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>
标题
正文{
背景：url（'noised_grid.png'）；
背景重复：重复；
}
（功能（）{
var images={}，按按钮，释放按钮，播放声音，i，a，aud，img，
container=document.getElementById（'container'）；
//预加载图像
对于（i=1；i您没有包括按钮和音频代码，这是与此问题真正相关的唯一内容。按钮加载功能不太可能是问题的一部分。更有可能的是，您只在单击时加载音频内容，而音频内容应直接与页面加载。请包括所有相关代码。每次e嵌入需要重新加载的声音，因此您很可能总是会得到延迟，您必须预加载声音-我还建议使用SoundManager2这样的播放器。为什么不也预加载声音？使用具有唯一id的嵌入标记，然后使用document.geElementById（“唯一”）.play（）jb//谢谢你的评论。这是我所有的东西。我说了按钮，但它实际上是一个图像，当你点击它时，它会变成一个不同的图像，如果你松开它，它会回到原始图像。我不确定你说的音频代码是什么意思。播放声音功能是播放音频的唯一代码。我如何使音频内容变为低aded Direct？Shannon//正如我所说，我对web脚本编写没有任何实际经验，因此我将对此进行搜索。老实说，我并不完全了解所有内容。我看到您有变量和循环来删除重复项，我知道子/同级属性是什么，但windows是从哪里来的？我还测试了代码，但它不起作用当我点击图片时，任何东西都可以。我在发布答案后不久就编辑了答案。你可能正在使用旧版本的代码，但确实有一些错误。现在应该可以了。哦，好的，我看到了代码上的一些更改。我用谷歌搜索了windows，我猜它是javascript的一个全局对象。我在不同的浏览器中再次测试了代码，看起来s现在工作正常。谢谢你window
是全局对象。在你的旧代码中，window.btn1\u down
将是你在btn1\u down
变量中定义的图像。我给出的代码没有全局变量，这通常被认为是一件好事。我还有一个问题。现在a.onclick正在调用playSound功能，但是否有方法在它仍在执行时重新启动？就像我单击按钮时，它会播放声音，但当我再次单击它时（当它仍在播放声音时），它会从一开始播放。