Stuck with multi click event

I am stuck with the following. I have a play button. When the user clicks the first time on it, it should play the song and add a pause button to it. The second time you click on the button, it should pause the song.

Came up with this:

$('.play').click(function(event) {
        event.preventDefault();

        var trackID = $(this).closest('li').attr('data-id');
        console.log(trackID);

        $('#playlist li').removeClass('active');
        $(this).parent().addClass('active'); 


        if ( $(this).hasClass('play pause') ) {
            console.log('false');
            $(this).removeClass('pause');
        } else {
            console.log('true');
            $(this).addClass('pause');
            //return false;
        }

        if (nowPlaying) {
            nowPlaying.stop();
        }


        SC.stream('/tracks/' + trackID, function(sound) {
            if ( !$(this).hasClass('play pause') ) {
                console.log('hellooo');
                sound.play();
                nowPlaying = sound;
            } else {
                console.log('byeee');
                sound.pause();
                nowPlaying = sound;
            }
        });

   });

The above part will work correct. Play is the default of the button. When click the console.log send me the trackID: 91298058, true, and the string hellooo inside the stream function and the song is playing. The second time it will give me also the trackID 91298058, false and also the string hellooo. So the bug is here. Whenever you click the string hellooo will be send to the console.log. And the console.log - byeee will never be send and thus never be paused.

So in short, I would like to have one button that switch from play to pause and reverse. At play it should play the song: sound.play(); and at pause it should pause the song: sound.pause();;

Does anyone know how to fix this issue?