Javascript 在鼠标悬停时播放随机轨迹

我在我的页面上有一个固定的图像，我希望它在鼠标悬停时播放一个随机的声音轨迹。这可能是5条轨道中的1条

这是我的HTML

这是我的CSS

.Airplane-photo {
  position: fixed;
  z-index: 1;
  height: 200px;
  bottom: 0px;
  right: 0px;
}

我所有的曲目都是MP3和OGG。我已经通读了本指南，但它对我所需要的东西没有帮助：

有人知道这是否可能吗

提前感谢

您可以创建一个mp3/ogg路径数组，如：

var audio = ["audio-1.mp3", "audio-2.mp3", "audio-3.mp3", "audio-4.mp3", "audio-5.mp3"];

此函数返回一个从0到5的随机数，其中5是

audio.length

，因此如果您有更多mp3，则无需更新

function getRandomAudio() {
    var max = audio.length;
    return Math.floor(Math.random() * (max + 1));
}

当光标位于按钮上方时，音频元素将从音频数组中将其源更改为新项

$btn.on('mouseover', function(){
  var index = getRandomAudio(); // random index
  $audio.attr('src', audio[index]); // change src
  $audio.get(0).play();
});

如果你想在按钮外面停止声音，你可以简单地调用mouseout函数，如下所示

$btn.on('mouseout', function() { $audio.get(0).pause() }); 

---

当然，你不会听到任何声音，因为路径不是真实的。

播放音频的代码在哪里？是的，这是可能的，但你需要JavaScript来完成你想要的@马吕斯回答：我认为这很好。谢谢你，马吕斯。我尝试过实现它，虽然它似乎不想工作，但我所有的声音文件都存储在一个名为sound的文件夹中。这是代码var audio=[“sound/audio1.mp3”、“sound/audio2.mp3”、“sound/audio3.mp3”、“sound/audio4.mp3”、“sound/audio5.mp3”、“sound/audio6.mp3”]；变量$btn=$（“按钮”）；var$audio=$（'audio'）；函数getRandomAudio（）{var max=audio.length；返回Math.floor（Math.random（）*（max+1））；}$btn.on（'mouseover'，函数（）{var index=getRandomAudio（）；$audio.attr（'sound/'，audio[index]）；$audio get（0.play（）；}）；顺便说一句，你在HTML中添加了吗？可能会在音频中添加一个ID，比如$btn=$（'.Airline button'）。在你的案例中，这是否正确，以尝试访问源代码$audio.attr（'sound/'，audio[index]）；