鼠标悬停时播放随机轨迹

Play a random track on mouse hover

本文关键字：随机 轨迹 播放 悬停 鼠标      更新时间：2023-09-26

我的页面上有一个固定的图像，我希望它在鼠标悬停时播放随机音轨。这可能是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/

有人知道这是否可能吗？

提前感谢

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();
});

如果你想在按钮外停止声音，你可以简单地调用鼠标输出功能，比如

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

PS。当然，你不会听到任何东西，因为路径不是真实的。

相关文章：