Geek Answers Handbook

Hover Button Sound Using HTML5 Audio

Can HTML5 be used to create sound when the user hovers over one of the buttons on the list of items? I would like to play a very short click / twitter sound once when the user hangs over the navigation button. I understand that it will not be compatible with any browser or device, and so long as it gracefully worsens. Would it be better to use Flash for this for some reason?

Edit
Also, if possible, I will be interested in some sample code, including javascript (if you need javascript). I'm fine with HTML, but not very convenient with Javascript.

+5
source share
2 answers

, . .

<audio id="myaudio" src="myaudio.mp3"></audio>

<button onmouseover="document.getElementById('myaudio').play()">Hover me</button>

Flash, , JavaScript Flash .

+7

, HTML5 .

. ( ).

, HTML5:

1) javascript

<script>
    function EvalSound(soundobj) {
        var thissound=document.getElementById(soundobj);
        try {
            thissound.Play(); //Quicktime, Windows Media Player, etc.
        }
        catch (e) {
            thissound.DoPlay(); //Real Player
        }
    }
</script>

2)

<embed src="mysound.wav" 
       autostart=false 
       width=0 
       height=0 
       id="mySound" 
       enablejavascript="true" />

3)

<ul id="myList">
    <li onHover="EvalSound('mySound')">Foo</li>
    <li onHover="EvalSound('mySound')">Bar</li>
</ul>

, jQuery:

<script>
    $(document).ready(function() {
        $('#myList').hover(EvalSound('mySound'));
    });
</script>

, realplayer DoPlay() Play().

0

More articles:


All Articles