我正在尝试创建一个HTML页面，其中包含在单击时播放声音的图像。每张图片的第一次点击效果很好，但随后的点击并不总是有效的；他们似乎又需要一些耐火材料负载了？
我有三个音频文件：；两个.mp3"5.mp3"；以及"；one.mp3"；。我还有三个不同颜色的圆圈图像，音频文件被分配给它们。我的代码基于这里的堆栈溢出答案。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<script src= "drag.js"></script>
</head>
<img id="a" src="jspsych/img/blue.png" class="dragme" data-state="play"/>
<audio id = "two" src="jspsych/audio/five.mp3" preload>
Your browser does not support the <code>audio</code> tag
</audio>
<img id="b" src="jspsych/img/orange.png" class="dragme" data-state="play"/>
<audio id = "five" src="jspsych/audio/two.mp3" preload>
Your browser does not support the <code>audio</code> tag
</audio>
<img id="c" src="jspsych/img/black.png" class="dragme" data-state="play"/>
<audio id = "one" src="jspsych/audio/one.mp3" preload>
Your browser does not support the <code>audio</code> tag
</audio>
<script language="javascript" type="text/javascript">
document.getElementById("a").addEventListener("click", function(e){
var state = e.currentTarget.dataset.state;
if (state == "play") {
document.querySelector("audio").play();
e.currentTarget.dataset.state = "pause";
}
else {
document.querySelector("audio").pause();
e.currentTarget.dataset.state = "play";
}
});
document.getElementById("b").addEventListener("click", function(e){
var state = e.currentTarget.dataset.state;
if (state == "play") {
document.getElementById("five").play();
e.currentTarget.dataset.state = "pause";
}
else {
document.getElementById("five").pause();
e.currentTarget.dataset.state = "play";
}
});
document.getElementById("c").addEventListener("click", function(e){
var state = e.currentTarget.dataset.state;
if (state == "play") {
document.getElementById("one").play();
e.currentTarget.dataset.state = "pause";
}
else {
document.getElementById("one").pause();
e.currentTarget.dataset.state = "play";
}
});
</script>
</html>
有人可能有改进的想法吗？
在将状态设置为"播放"：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<script src="drag.js"></script>
</head>
<body>
<img id="a" src="jspsych/img/blue.png" class="dragme" data-state="play" />
<audio id="two" src="https://www.w3schools.com/tags/horse.mp3" preload>
Your browser does not support the <code>audio</code> tag
</audio>
<img id="b" src="jspsych/img/orange.png" class="dragme" data-state="play" />
<audio id="five" src="https://www.w3schools.com/tags/horse.mp3" preload>
Your browser does not support the <code>audio</code> tag
</audio>
<img id="c" src="jspsych/img/black.png" class="dragme" data-state="play" />
<audio id="one" src="https://www.w3schools.com/tags/horse.mp3" preload>
Your browser does not support the <code>audio</code> tag
</audio>
<script language="javascript" type="text/javascript">
document.getElementById("a").addEventListener("click", function(e) {
var state = e.currentTarget.dataset.state;
if (state == "play") {
document.querySelector("audio").play();
e.currentTarget.dataset.state = "pause";
} else {
document.querySelector("audio").pause();
e.currentTarget.dataset.state = "play";
document.querySelector("audio").play();
}
});
document.getElementById("b").addEventListener("click", function(e) {
var state = e.currentTarget.dataset.state;
if (state == "play") {
document.getElementById("five").play();
e.currentTarget.dataset.state = "pause";
} else {
document.getElementById("five").pause();
e.currentTarget.dataset.state = "play";
document.getElementById("five").play();
}
});
document.getElementById("c").addEventListener("click", function(e) {
var state = e.currentTarget.dataset.state;
if (state == "play") {
document.getElementById("one").play();
e.currentTarget.dataset.state = "pause";
} else {
document.getElementById("one").pause();
e.currentTarget.dataset.state = "play";
document.getElementById("one").play();
}
});
</script>
</body>
</html>我认为发生的事情是，音频文件是在加载页面的同时加载的，所以它第一次正确播放，没有任何延迟，现在由于文件来自互联网，它需要一些加载时间，也不要忘记你在音频标签中提到了preload属性，这意味着音频必须在播放之前完全加载，所以在你的情况下，你可以在播放音频的任何地方添加下面的行
//Replace this
document.getElementById("one").play()
//With this
document.getElementById("one").oncanplaythrough=function(){
this.play()
}
上面的行在缓冲区中加载了足够多的文件块，这样就可以播放它，这样可以在很大程度上减少延迟，我认为这可能会对你有所帮助，你还需要从音频标签中删除preload