悬停多个实例 div 时的独特声音

Posted 2023-02-25

【中文标题】悬停多个实例 div 时的独特声音

【英文标题】：unique sound when hovering multiple instance div

【发布时间】：2014-01-10 15:06:26

【问题描述】：

当我将一个具有特定类 (.trigger) 的 div 元素悬停时，我正在尝试播放独特的声音。 我的问题是，我有这个 div 类的多个实例，这意味着无论我悬停哪个 div，都会播放（相同的）声音。

我的 dreamscenario 将是，只要下一个 div 悬停（并希望播放下一个声音），任何先前的声音都会停止（我使用的是 1-2 秒长的声音文件)。

我已通过 html5 将我的音频包含在我试图用作触发器的 div 中。

<div class="trigger">
    <audio id="sound" preload="auto">
        <source src="sound1.mp3"></source>
        <source src="sound1.mp3"></source>
    </audio>
</div>

<div class="trigger">
    <audio id="sound" preload="auto">
         <source src="sound2.mp3"></source>
         <source src="sound2.mp3"></source>
    </audio>
</div>

我正在使用这个脚本：

$(".trigger")
  $(this).each(function(i) 
    if (i != 0)  
      $("#sound")
        .clone()
        .attr("id", "sound" + i)
        .appendTo($(this).parent()); 
    
    $(this).data("cnt", i);
  )
  $(this).mouseenter(function() 
    $("#sound" + $(this).data("cnt"))[0].play();
  );
$("#sound").attr("id", "sound0");

如果有任何帮助和更好的想法来实现这一点，我将不胜感激 :) 我是个糟糕的新手——很抱歉。

【参考方案1】：

就这么简单？

$('.trigger').hover(
    function() 
        sound = $(this).children()[0];
        sound.play();
    , function() 
        sound.pause();
        sound.currentTime = 0;
    
);

现场演示： http://jsfiddle.net/oscarj24/VwSLj/5/

【讨论】：

太棒了！非常感谢——这行得通。但是是否有可能将声音播放到最后或直到另一个声音悬停而不是在鼠标离开 div 时停止它？

【参考方案2】：

好的，您的第一个问题是您在每个 div 中都有相同的 id（“声音”），并且 id 必须是唯一的。我会把它改成一个类（class="sound"） 然后，像

$('.trigger').mouseenter(function() 
    $(".sound").get(0).pause();
    $(this).find(".sound").get(0).play();
);

我还没有测试过这段代码。

【参考方案3】：

第一次从 ID 更改为类，因为 ID 选择器不应该重复。

<div class="trigger">
    <audio class="sound" preload="auto">
        <source src="sound1.mp3"></source>
        <source src="sound1.mp3"></source>
    </audio>
</div>

jQuery

$(".trigger").mouseenter(function () 
     var curAudio = $(this).find('audio');
     var allAudio = $('.sound');
    $.each(allAudio,function(ind,val)  
         $(this).get(0).pause();
         $(this).get(0).currentTime = 0;   
    );
     curAudio.get(0).play();
);

演示here

【讨论】：

非常感谢，但不幸的是它不起作用：/ 仍然与上面相同：每个具有“.trigger”类的 div 都会触发相同的声音。

我编辑了上面的代码以使其更易于理解。我的触发器中的声音 -> -tags 是不同的。

所以你在每个触发器类中都有不同的音频文件，对吧？