javascript - 根据悬停图像播放特定音频(javascript)

标签 javascript html css html5-audio

我应该在网站上有 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]);
}

希望这是清楚/有帮助的。否则,请告诉我,我很乐意予以澄清。

关于javascript - 根据悬停图像播放特定音频(javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65098491/

相关文章:

javascript - 当听到按下箭头键时,我应该在 <body> 还是 <html> 上执行此操作

javascript - 无法使用react-router访问URL路径组件

javascript - typescript 中的TypeError : Cannot read property 'toArray' of null at Context. <anonymous>

javascript - 如何访问表格单元格中下拉列表的值

javascript - 如何用GWT或HTML+CSS+JavaScript画对 Angular 线?

html - 5 列 - 3 个固定宽度列和 2 个流体列

html - 如何在站点中心设置链接

javascript - 如何在纯 JavaScript 中使用类似 jQuery 的选择器

javascript - 奇怪的 html 错误

javascript - DataTables Bootstrap 不工作