在鼠標懸停上播放隨機曲目

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也。當然你不會聽到任何聲音，因爲路徑不是真實的。