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

【问题标题】：HTML: Play sounds on mouse hover or clickHTML：鼠标悬停或单击时播放声音
【发布时间】：2010-10-20 12:11:16
【问题描述】：

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

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

【问题讨论】：

请确保有一个非常简单的选项来禁用该功能。我们当中有些人对一个向我们发出噪音的网站感到不满。 :-)
这里回答stackoverflow.com/questions/3342803/audio-on-mouseover
如果你想点击播放声音，请看这里：stackoverflow.com/questions/12025223/play-sound-on-click

标签： jquery html css audio

【解决方案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。

【讨论】：