使用HTML5音频按钮悬停声音

时间:2011-03-10 03:35:09

标签: html5 html5-audio

当用户将鼠标悬停在我的某个列表项按钮上时,是否可以使用HTML5发出声音?当用户将鼠标悬停在导航按钮上时,我想一次播放非常短的咔嗒声/唧唧声。我意识到它不会在每个浏览器或设备上兼容,只要它优雅地降级就可以了。出于某种原因,为此使用Flash会更好吗?

修改
此外,如果可以这样做,我会对一些示例代码感兴趣,包括javascript(如果需要javascript)。我对HTML很好,但对Javascript不太方便。

2 个答案:

答案 0 :(得分:7)

我没有做过这样的事,但它应该是可能的。 E.g。

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

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

我不熟悉Flash,因此我不确定您是否可以使用JavaScript来播放Flash文件。

答案 1 :(得分:0)

这是一个老答案,现在你可以真正使用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()