Воспроизвестислучную дорожку при наведении указателя мыши

Question

У меня есть фиксированное изображение на моей странице, и я хочу, чтобы он играл случайную звуковую дорожку при наведении курсора мыши. Это может быть 1 из 5 треков.

Это мой 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() }); 

PS. Конечно, вы ничего не услышите, потому что пути не реальны.