HTML：鼠标悬停或单击时播放声音

Posted 2023-02-25

【中文标题】HTML：鼠标悬停或单击时播放声音

【英文标题】：HTML: Play sounds on mouse hover or click

【发布时间】：2010-10-20 12:11:16

【问题描述】：

在我的网站上，我想在鼠标悬停（悬停）或单击鼠标时播放滴答声/点击声。这可以实现吗？

我可以在 flash 中做到这一点，但我想避免 flash。

【问题讨论】：

请确保有一个非常简单的选项来禁用该功能。我们当中有些人对一个向我们发出噪音的网站感到不满。 :-)

这里回答***.com/questions/3342803/audio-on-mouseover

如果你想点击播放声音，请看这里：***.com/questions/12025223/play-sound-on-click

【参考方案1】：

如果您不想使用 Flash，请参阅此处了解所有选项 http://www.phon.ucl.ac.uk/home/mark/audio/play.htm

javascript 无法播放音频，因此上述方法之一是唯一的出路。

请参阅上面链接中的 3 和 4，您可以使用 javascript 在鼠标悬停时触发它。

OR Dhtml 播放声音http://webdesign.about.com/od/sound/a/play_sound_oncl.htm

【参考方案2】：

您可以使用标签或对象或嵌入播放音频。这是最好的方法，如下所示。您可以使用 javascript 控制音频标签。

您可以通过单击这些按钮来控制音频：

玩 停止

而且你必须把这个脚本放到

<script>
    $(document).ready(function() 
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'audio.mp3');
    audioElement.setAttribute('autoplay', 'autoplay');
    //audioElement.load()
    $.get();
    audioElement.addEventListener("load", function() 
    audioElement.play();
    , true);




    $('.play').click(function() 
    audioElement.play();
    );


    $('.pause').click(function() 
    audioElement.pause();
    );

     );

但对于 Chrome，您不能使用 .play() 和 .pause()。您必须使用 .Play() 和 .Stop。

【参考方案3】：

您可以通过 JavaScript 控制 HTML5 <audio> 元素。

这不适用于 IE 8 及更低版本（不确定是否为 9），也不适用于旧版本的 Firefox、Safari、Chrome 和 Opera。