javascript/jquery stop button to change play button to initial state not pause

Question

I am using Soundmanager2 to play mp3 files. I have a play button which toggles with pause. and a separate stop button.

Press 'play', music plays and button has toggled to 'Pause'. Press 'pause' button and music pauses. Works great. Here is my problem:

Press 'Play' music plays and button changes to a 'pause' button. Press Stop and music stops. That's great but the play button is still as a 'pause' button. Pressing it swicthes it back to play and then a second click plays the music again.

I need to somehow under the stop button code below, reset the play button to it's initial state when the stop button is pressed?

I tried adding 'iteration=1' under the stop code but this doesn't work.

Here is the javascript code:

$(function(){
$('.a5play').click(function(){
var iteration=$(this).data('iteration')||1
switch ( iteration) {

case 1:
soundManager.play('mySound1');
$('.a5play').text('Pause');
break;

case 2:
soundManager.pause('mySound1');
$('.a5play').text('Play');

break;

}
iteration++;
if (iteration>2) iteration=1
$(this).data('iteration',iteration)
})
})

$('.a5stop').click(function(){
        interation=1;
        soundManager.stop('mySound1');

                    });

Thanks in advance for any help you can provide.

Answer 1

I decided to try coding an alternative approach to this and got it to work as required. As it may be helpful for others, here is what I have created:

 var playbackState = 0;

 /*0 = play*/
 /*1 = pause*/
    $('.a5play').click(function(){
       if(playbackState == "0") {
playbackState="1";
soundManager.play('mySound1');
$('.a5play').text('Pause');
       } else {
playbackState="0";
soundManager.pause('mySound1');
$('.a5play').text('Play');
       }
    });
    $('.a5stop').click(function(){
       playbackState="0";
       soundManager.stop('mySound1');
       $('.a5play').text('Play');
    });