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

Question

当声音文件结束时，我将如何添加一个事件监听器来执行删除类的功能。 (让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");
});   

Answer 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:节奏不错，伙计! :)