sounds play with delay on mouseover mp3, Wordpress

Question

I am working on wordpress site. In this site i need to play sounds on mouseover, everything is well, but something is wrong, and I dont know why?

There is delay when mouseover on the button.

please check the link http://barkingspidertheatre.com.au/new/

here is my code

JavaScript

function doPlay(what){
        document.getElementById('music').innerHTML='<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf?autoplay=1" width="200" height="20">'
        +'<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf?autoplay=1" />'
        +'<param name="bgcolor" value="#000000" />'
        +'<param name="autoplay" value="1" />'
        +'<param name="FlashVars" value="mp3='+what+'" />'
        +'</object>';
    }
    function doStop(){
        document.getElementById('music').innerHTML='';
    }

HTML

<a href="<?php bloginfo("url");?>/roving-butterflies-penelope-ulysses/?ajax=true&amp;width=108%&amp;height=105%" rel="prettyPhoto[ajax]" onMouseMove="javascript:doPlay('<?php bloginfo('template_url'); ?>/songs/Harp_gliss_wind_chimes_short_BLASTWAVEFX_15022.mp3')"  onMouseOut="doStop();">


<div class="music_player" id="music"></div>

Can any one tell me how can i remove delay on mousover play sound.

Thanks

Answer 1

with html5 you can access the audio api directly, you can do something like below instead of creating object tag for playing the sound:

function doPlay(what){
    var snd = new Audio(what); // buffers automatically when created so no delay
    snd.play();
}

hope it helps.