About This Script
To use this, copy the script from below to the <head> tag of your page. Then add the "hoverSound" class to any element you want this to apply to, and the data-sound=""
attribute.
Demo
Hover over an image to hear the sound.
Code
<!-- jQuery is required if you're not already using it -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('.hoverSound').hover(function(){
if ($(this).data('audioElement')) {
$(this).data('audioElement').play();
} else {
var sound = $(this).attr('data-sound');
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', sound);
audioElement.setAttribute('autoplay', 'autoplay');
$(this).data('audioElement', audioElement);
}
}, function(){
$(this).data('audioElement').pause();
$(this).data('audioElement').currentTime = 0;
});
});
</script>
<!-- Examples. You don't need to copy this part. -->
<img class="hoverSound" src="http://www.top-site-list.com/scripts/assets/grayscale-images/dog.jpg" data-sound="http://www.top-site-list.com/scripts/assets/sound-on-hover/bark.mp3" />
<img class="hoverSound" src="http://www.top-site-list.com/scripts/assets/grayscale-images/horse.jpg" data-sound="http://www.top-site-list.com/scripts/assets/sound-on-hover/neigh.mp3" />
More scripts