javascript - 在鼠标悬停时播放随机轨道

Question

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

这是我的 HTML <img src="images/Airplane.png" class="Airplane-photo">

这是我的CSS

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

我所有的轨道都是 MP3 和 OGG。我已通读本指南，但它无法帮助我满足我的需求:https://css-tricks.com/play-sound-on-hover/

有人知道这是否可行吗？

提前致谢

Answer 1

http://jsbin.com/fiyomafuce/2/edit

你制作了一个 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() }); 

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