只播放一次声音 Jquery

Posted 2023-02-25

【中文标题】只播放一次声音 Jquery

【英文标题】：Play sound only once Jquery

【发布时间】：2013-04-11 14:11:40

【问题描述】：

我正在尝试实现这样的目标，将鼠标悬停在图像上时会播放声音，并且我希望声音只播放一次，这意味着在初始悬停后，后续悬停不会触发声音播放再说了，目前我正在尝试这段代码，但它不起作用

$(document).ready(function()

$("#bg")[0].play();

var pring = 0;

$(function()
$('#apDiv5').hover(
 function()$("#phone")[0].play();,
 function()$("#phone")[0].stop();
 pring++;
 if (pring > 1) function()$("#phone")[0].stop();
 );


);

);

【问题讨论】：

如果您不是在处理沉重的声音应用程序，请不要播放声音。以防万一，只需将data-played 属性添加到元素并将其设置为true，然后在进一步悬停时检查它。

听起来不是很重，但因为我在做一个网络漫画，所以它增强了读者的互动性。

【参考方案1】：

$('#apDiv5').one('hover', function() 

这将使您的悬停事件只发生一次。

【参考方案2】：

您总是可以为播放音频的元素添加一个特殊的类并测试它是否已经具有该类：

LIVE DEMO

$(function()

   function playOnHover(el, audioFile)      
      $(el).addClass('played');
      var sound = new Audio( audioFile );   
      sound.play();      
   

   $('#apDiv5').on('mouseenter', function()
      if(!$(this).hasClass('played')) playOnHover( this, "sound.ogg" );
   );

);

【讨论】：

非常感谢！将测试它！

@bunzbox 如您所见，您不需要在整个文档中创建 <audio> 元素。 new Audio() 将完成这项工作。

【参考方案3】：

试试这个。 http://jsfiddle.net/WAeQU/ 使用 jQuery off 如果小提琴不起作用，它至少应该让你上路。

【讨论】：

我忘了在hov对象hov.init();之后添加这个