jPlayer Example

HTML

<link rel="stylesheet" href="http://jplayer.org/latest/skin/pink.flag/jplayer.pink.flag.css">
<script src="http://jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js"></script>

<div class="img-container"></div>

<div id="jp"></div>

CSS

.img-container {
    width: 100px;
    height: 100px;
    border: 2px #E62A14 dashed;
    margin: 50px auto;
    background: url(http://www.site-studio.ru/yandex.gif) center center no-repeat;
}

.img-container:hover {
    border-color: #145EE6;
    background-image: url(http://ozozhe.ru/img/poiski/google.gif);
}

JavaScript

var sounds = [
    'http://www.soundjay.com/button/beep-02.mp3',
    'http://www.soundjay.com/button/beep-06.mp3',
    'http://www.soundjay.com/button/beep-09.mp3',
    'http://www.soundjay.com/button/button-24.mp3'
];

$(document).ready(function() {
    $('#jp').jPlayer({
        swfPath: "http://jplayer.org/latest/dist/jplayer",
        supplied: "mp3",
		wmode: "window"
    });
    
    
    
    $('.img-container').on('mouseenter' ,function(){
        var randomSound = sounds[Math.floor(Math.random()*sounds.length)];
                
        $('#jp').jPlayer("setMedia", {
         mp3: randomSound
        }).jPlayer("play");
    });
    
});