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

当光标位于按钮上方时，audio元素会将其源代码更改为音频数组中的新项目。

$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。当然，你不会听到任何声音，因为路径并不真实。

鼠标悬停时播放随机曲目

1 个答案: