Question

I’ve tried two different methods of toggling the play/pause button on my player, neither of which work on the first click, for some reason.

This one, supposedly checks the status of the audio to see if it’s paused or ended:

function togglePlayPause() { 
var audioPlayer = document.getElementsByTagName('audio')[0];
var playpause = document.getElementById("playpause"); 
if (audioPlayer.paused || audioPlayer.ended) { 
     playpause.title = "pause"; 
     playpause.innerHTML = "pause"; 
} 
else { 
         playpause.title = "play"; 
     playpause.innerHTML = "play"; 
     } 
}

Or I’ve tried this one, which just toggles via the onClick toggle(this):

 function toggle(obj) {
    if (obj.className== 'playButton') {
        obj.className = 'pauseButton';
        obj.title = "PAUSE"; 
        obj.innerHTML = "PAUSE";
    } else {
        obj.className = 'playButton';
        obj.title = "PLAY"; 
        obj.innerHTML = "PLAY";
        }
    }

Neither toggle the first time the button is clicked, although the first method does change from the default inner “PLAY” to “play”, so I guess that’s something:

<a href="#" id="start" onclick="playPause();togglePlayPause();"><div title="play" class="playButton" id="playpause">PLAY</div></a>

In both methods, subsequent clicks work fine. Any idea why this is happening? Could it have something to do with the way the audioPlayer variable is called? The array starts from 0. (I’m clutching at straws.)

Many thanks as usual!

Answer 1

I would go without creating functions, I would check if the link is clicked then proceed to the events that would be fired.

so something like $("#start").click(function(){}); in can be tried.

First, have the jQuery library included in your HTML header.

Then create a new javascript file, included it as well (usually this is put after the jQuery included)

In your new javascript file write the following

$(document).ready(function() {
   $("#start, #stop, #play, #pause").click(function() { //you can have more or less selectors (selectors are the ones with #)
       //Your code goes here
   });
});

Here is a fiddle for that solution. http://jsfiddle.net/JRRm2/1/ (tidier text: http://jsfiddle.net/JRRm2/2/)