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

Posted 2023-02-25

【中文标题】添加事件侦听器，在播放完声音后更改/删除类

【英文标题】：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/