添加事件侦听器，在播放完声音后更改/删除类

关键词：

【中文标题】添加事件侦听器，在播放完声音后更改/删除类【英文标题】：Add event listener that changes / removes class when sound is done playing 【发布时间】：2015-09-21 08:03:23 【问题描述】：

如何添加一个事件侦听器，该侦听器在声音文件结束时执行删除类的功能。 （播放完成后让 Jsfiddle 中的播放按钮变回绿色）

jsfiddle:https://jsfiddle.net/wyfjdgyb/4/

$(".play").on('click',function()
    var key = $(this).attr('key');     
    EvalSound(key);
    var this_play = $(this);
    $(".play").each(function() 
        if ($(this)[0] != this_play[0]) 
            $(this).removeClass("pause");
        
    );
    $( this ).toggleClass( "pause" );
);

var thissound = new Audio();
var currentKey;
function EvalSound(key) 
    if(currentKey !== key)
        thissound.src = "http://99centbeats.com/beats/" + key + ".mp3";      
    currentKey = key;

    if (thissound.paused)
        thissound.play();
    else
        thissound.pause();
        thissound.currentTime = 0;
        currentPlayer = thissound;     

$(".play").bind('ended', function()
    // done playing
    $(this).removeClass("pause");
);   

【问题讨论】：

【参考方案1】：

您可以借助audio 对象的current Time 和duration 属性来实现它。您应该设置一个具有低延迟的间隔（借助setInterval() 函数）来检查这两个属性是否相同。当它们变得相同时，这意味着音轨到达了终点。请记住在需要时清除间隔。

var interval;
function EvalSound(key) 

    if(currentKey !== key)
        thissound.src = "http://99centbeats.com/beats/" + key + ".mp3";      
    currentKey = key;

    if (thissound.paused) 
        thissound.play();
        interval = setInterval(function() 
            if(thissound.currentTime == thissound.duration) 
                clearInterval(interval);    
                console.log('Sound played!');
                       
        ,100);
     else 
        thissound.pause();
        thissound.currentTime = 0;
        currentPlayer = thissound;
        clearInterval(interval);   
        

这里是the fiddle。

PS：不错的节奏，伙计！ :)

【讨论】：

效果很好！谢谢拉扎列夫！【参考方案2】：

您可以将结束的处理程序附加到声音元素而不是 DOM 元素，并将单击的元素传递给您的函数。

代码：

 function EvalSound(el, key) 

     thissound.addEventListener('ended', function () 
         // done playing
         $(el).removeClass("pause");
     );

     if (currentKey !== key) thissound.src = "http://99centbeats.com/beats/" + key + ".mp3";
     currentKey = key;

     if (thissound.paused) thissound.play();
     else thissound.pause();
     thissound.currentTime = 0;
     currentPlayer = thissound;

 

演示：https://jsfiddle.net/9a9jbqzz/

【讨论】：

删除侦听器类不会停止与 Jquery Javascript 相关的声音事件

】删除侦听器类不会停止与JqueryJavascript相关的声音事件【英文标题】：Removingalistenerclassdoesn\'tstopasoundeventassociatedJqueryJavascript【发布时间】：2016-11-1012:04:43【问题描述】：我在将鼠标悬停在图像上时播放声音（这已经可以正常工... 查看详情

在 Javascript/jQuery 中播放完声音后刷新页面

】在Javascript/jQuery中播放完声音后刷新页面【英文标题】：RefreshthepageaftersoundisdoneplayinginJavascript/jQuery【发布时间】：2012-12-0306:50:14【问题描述】：难住了，我想在点击按钮清除到localstorage数据的时候有一个纸皱的声音，但是要... 查看详情

移除类添加的事件监听器

...306:56:01【问题描述】：我想了解如何删除按类添加的事件侦听器，如下所示（删除div#mainMenu的事件）我已经尝试了所有可用的方法，但都没有奏效。我也没有在extJS4.x版本中看到这个问题，但只在3.4版本中。有什么简单的JS代码... 查看详情

javascriptjs类更改事件侦听器保存在cookie中(代码片段)

查看详情

播放完声音后如何关闭视图

】播放完声音后如何关闭视图【英文标题】：howcanicloseviewaftercompletionofplayingsound【发布时间】：2010-09-0409:15:07【问题描述】：嗨，我是iphone新手。我所做的是显示一个图像网格，通过从网格中选择图像，所选图像将与声音一起显... 查看详情

MySQL表更改的事件监听器？

...-01-1122:32:50【问题描述】：是否有php/javascript/mysql/ajax事件侦听器或方法可以在MySQL表中的数据每次更改时调用函数-例如添加新行或更改/删除行时。还是我从错误的角度看它，我还在学习AJAX。只是寻找正确的方向，我找不到任何... 查看详情

删除重复的事件侦听器

】删除重复的事件侦听器【英文标题】：Removingduplicateeventlisteners【发布时间】：2018-01-2503:59:13【问题描述】：我一直在尝试找到一种方法来删除事件侦听器。我制作了一个函数，它将向按钮添加事件侦听器，但如果该函数再次... 查看详情

自谷歌自动播放政策更改后如何在网站上播放通知声音

】自谷歌自动播放政策更改后如何在网站上播放通知声音【英文标题】：Howtoplaynotificationsoundonwebsitesincegoogleautoplaypolicychange【发布时间】：2019-10-2812:21:54【问题描述】：我一直在尝试在网站上发出短促的哔声，但谷歌自动播放政... 查看详情

JS删除由库添加的事件侦听器[重复]

】JS删除由库添加的事件侦听器[重复]【英文标题】：JSRemovingEventListenerAddedbyaLibrary[duplicate]【发布时间】：2018-03-2411:11:10【问题描述】：我不确定这是否可能，但基本上，我有事件侦听器，这些事件侦听器由库(jQuery)自动添加到... 查看详情

本地存储中的更改未触发事件侦听器

】本地存储中的更改未触发事件侦听器【英文标题】：Changeinlocalstoragenottriggeringeventlistener【发布时间】：2020-07-1422:11:44【问题描述】：我有React组件。最初我在UseEffect中设置了一些localStorage。此外，我添加了事件侦听器。单击文... 查看详情

添加天空盒以及audiosource音频源的设置

...ighting，然后会弹出下面的窗口,见图（1-4）AudioListener音频侦听器组件在Component下的Audio里面。收听音乐:有了这个组件,你才能听到游戏中的特效/背景/战斗音乐.音频监听器没有属性。它必须被添加才能使用。它总是默认地添加到... 查看详情

动态添加事件监听

...想知道是否有人可以告诉我从元素中动态添加和删除事件侦听器的最佳方法。我设置了一个组件。单击模板中的某个元素时，我想将mousemove的侦听器添加到同一模板的另一个元素中。然后我想在单击第三个元素时删除此侦听器。... 查看详情

动画 gif 不播放 - 鼠标侦听器 - 事件鼠标输入

】动画gif不播放-鼠标侦听器-事件鼠标输入【英文标题】：Animatedgifdoesnotplay-mouselistener-eventmouseentered【发布时间】：2013-06-2204:25:45【问题描述】：我有一个用图像替换的按钮，在悬停时我希望图像播放动画gif。我添加了一个鼠标... 查看详情

androidasynctask问题

...异步任务后怎么返回一个值传给Activity？比如我在AsynTask添加数据到ArrayList中，执行完怎么ArrayList值返回到Activity中？求大神我好傻，写成内部类不就行了吗参考技术A亲，可以用事件监听哦，你可以自定义一个接口代表这个监听... 查看详情

添加事件侦听器以在 videojs 的运行时获取视频持续时间

】添加事件侦听器以在videojs的运行时获取视频持续时间【英文标题】：toaddeventlistenerforgettingvideodurationinruntimeinvideojs【发布时间】：2016-05-1806:20:44【问题描述】：我想在使用任何事件监听器播放视频时监控视频时长。我正在使用... 查看详情

在何处添加事件侦听器的最佳实践

】在何处添加事件侦听器的最佳实践【英文标题】：Bestpracticesforwheretoaddeventlisteners【发布时间】：2014-11-2402:51:25【问题描述】：在我的页面上，用户单击一个元素以对其进行编辑。为此，我将editable类分配给所有此类元素。我应... 查看详情

安装纯净系统后怎么设置本地音乐

...音乐文件夹放在电脑桌面上，在打开播放器时，点击文件添加歌曲，将本地收藏的歌曲添加到播放器中；或者双击直接打开播放器，直接拖动把本地歌曲参考技术A来到通知区域找到里面的小喇叭图标直接在图标上面单击鼠标右... 查看详情

如何在sqlalchemy中的值更改后触发事件

】如何在sqlalchemy中的值更改后触发事件【英文标题】：Howtotriggeraneventaftervaluechangeinsqlalchemy【发布时间】：2020-12-0417:56:38【问题描述】：我正在使用sqlalchemy定义一个映射类。它包含三个用户定义的值（a、b、c）和一个依赖值（ab... 查看详情