在点击菜单上播放不同的声音

Posted 2023-02-25

【中文标题】在点击菜单上播放不同的声音

【英文标题】：Play different sounds on click menu

【发布时间】：2014-08-09 15:42:48

【问题描述】：

我正在做一个项目，我需要为菜单上的每个 div 播放不同的音频文件。 我正在使用以下代码：

$(document).ready(function()   
    var playing = false;  
    $('.punt').click(function()   
        if (playing == false)   
            $(this).play();  
            playing = true;  
         else   
            $(this).pause();  
            $(this).currentTime=0;  
           playing = false;  
          
    );  
);  

和 html：

<div class="menu">  
<ul>  
<li><div class="punt primertf">Transecte 1<audio id="player"  src="so/itinerari.mp3"></audio></div></li>  
<li><div class="punt segontf">Transecte 2<audio id="player"  src="so/fontibonun.wav"></audio></div></li>  
<li><div class="punt tercertf">Transecte 3<audio id="player"  src="so/fontibondos.wav"></audio></div></li>  
<li><div class="punt quarttf">Transecte 4<audio id="player"  src="so/fontibontres.wav"></audio></div></li>  
<li><div class="punt cinquetf">Transecte 5<audio id="player"  src="so/fontibonquatre.wav"></audio></div></li>  
</ul>  
</div>  

如果不是（这个）我为每个它工作的类使用不同的类，但我认为它可以比这种方式简单。我做错了什么？

【参考方案1】：

它不起作用的原因是您混淆了$(this)（jQuery object）和this（DOM 元素）。 jQuery 对象没有播放/暂停方法或currentTime 属性。以下是工作代码：

$(document).ready(function()   
    var playing = false,
        audioPlayers = $('.punt audio');
    $('.punt').click(function()   
        if (playing == false)   
            $(this).find('audio').get(0).play();  
            playing = true;  
         else   
            audioPlayers.each(function()
                this.pause();
                this.currentTime=0;
            );  
           playing = false;  
          
    );  
);

audioPlayers 是一个缓存的 jQuery 对象，包含所有菜单音频标签。单击菜单项时，我们会检查是否正在播放任何音频。如果不是，那么我们通过查找子 audio 标签来播放所选菜单的音频，使用 .get() 获取匹配的 DOM 元素，然后使用 .play()。

如果音频已经在播放，我们使用.each() 循环遍历每个audio 标签，然后暂停并重置每个标签的当前时间。 this 可以在.each() 循环中使用，因为它直接引用audio 标记。

这是一个工作演示：http://jsfiddle.net/kpk6y1dr/（我还删除了重复的 ids）

【讨论】：

谢谢，但是在播放新的声音之前可以停止其他声音吗？我的意思是，现在，如果您单击菜单的第一个元素会启动第一个元素，如果单击第二个元素，则第一个声音会停止，但在再次单击后不会启动第二个。

@user3013881 - 没问题，这很容易做到：jsfiddle.net/7avucak1 - 您只需删除 if...else 和 playing 变量，然后将播放点击音频的代码移动到 @987654343 下方@循环。

当我看到它工作时，我明白它是如何工作的以及为什么工作，但我无法创建代码......现在的问题是在它完成之前无法停止声音...... .

@user3013881 - 我做了一个小的补充来解决这个问题：jsfiddle.net/7avucak1/1