根据悬停图像播放特定音频 (javascript)
Play a specific audio based on hovered image (javascript)
我应该在网站上有 5 张动物图片,每当我将鼠标悬停在动物上方时,就会播放它们特有的声音。有没有比使用 switch case 更有效的方法来做到这一点?
这是我目前所拥有的(仅适用于 1 只动物):
HTML:
<img src="img/piggy.png" onmouseover="F1(this)">
JS:
function F1(img) {
var audio = document.getElementById("audio");
audio.play();
}
我认为这是一个非常坚实的基础。如果是我,我几乎会做你正在做的事情,但会设置一个包含可用声音片段列表的数组。然后,onmouseover
传入一个数字 (0-5) 并将其用作选择器来选择播放哪个音字节。
var sounds = ["sound1", "sound2", "sound3", "sound4", "sound5"];
function playAudio(track) {
audio.play(sounds[track]);
}
希望是 clear/helpful。否则,请告诉我,我很乐意澄清。
您可以将要播放的声音嵌入到 img
标签的数据集中:
<img src="img/piggy.png" data-sound='piggy.wav' onmouseover="playSound(this)">
function playSound(element) {
var audio = new Audio(element.dataset.sound);
audio.play();
}
您可能希望在页面加载时预加载所有音频文件
我应该在网站上有 5 张动物图片,每当我将鼠标悬停在动物上方时,就会播放它们特有的声音。有没有比使用 switch case 更有效的方法来做到这一点? 这是我目前所拥有的(仅适用于 1 只动物):
HTML:
<img src="img/piggy.png" onmouseover="F1(this)">
JS:
function F1(img) {
var audio = document.getElementById("audio");
audio.play();
}
我认为这是一个非常坚实的基础。如果是我,我几乎会做你正在做的事情,但会设置一个包含可用声音片段列表的数组。然后,onmouseover
传入一个数字 (0-5) 并将其用作选择器来选择播放哪个音字节。
var sounds = ["sound1", "sound2", "sound3", "sound4", "sound5"];
function playAudio(track) {
audio.play(sounds[track]);
}
希望是 clear/helpful。否则,请告诉我,我很乐意澄清。
您可以将要播放的声音嵌入到 img
标签的数据集中:
<img src="img/piggy.png" data-sound='piggy.wav' onmouseover="playSound(this)">
function playSound(element) {
var audio = new Audio(element.dataset.sound);
audio.play();
}
您可能希望在页面加载时预加载所有音频文件