在鼠标悬停上播放随机曲目

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

如果你想停止发声时，其按钮外，你可以简单地调用鼠标移开功能，这样

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

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