javascript - Add event listener that changes / removes class when sound is done playing -

how add event listener performs function remove class when sound file has ended. (make play button in jsfiddle turn green when done playing)

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");         }     });     $( ).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"); });    

you can achieve of current time , duration properties of audio object. should set interval(with of setinterval() function) low delay check if 2 properties identical. when become identical mean audio track reached end. keep in mind clear intervals when need to.

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);        }     } 

here the fiddle.

ps: nice beats, dude! :)