ttwMusicPlayer action on play button

Question

I'm using ttwMusicPlayer on my site. It's usage is pretty simple.

<div id='mainPlayer'></div>

in html and in js

$('#mainPlayer').ttwMusicPlayer(myPlaylist, {
                autoPlay:false, 
                description:description,
                jPlayer:{
                    swfPath:'path where jPlayer.swf is' //You need to override the default swf path any time the directory structure changes
                }
            }); 

It's easy, I have now good looking player. But I want to add some action on it's play-button. (I want to make an ability to play from server and from soundcloud). Here is code of div with play button of player:

<div class="play jp-play" style="display: block;"></div>

So then I do this after $(document).ready() of course

.on('click','.jp-play',function(){
    alert("Works");
});

And after click on play button music plays but there is no alert. How can I override it's default action?

Answer 1

Here's how you can do it:

$(document).on($.jPlayer.event.play, function(e){
    console.log("play!");
    alert("Works");
});

This uses the jPlayer event play.

Other supported event types are described here: http://jplayer.org/latest/developer-guide/#jPlayer-event-type

Full example: JSFiddle