Javascript: play/pause if clicked and change src

Question

HTML

<audio id="player" src="file.ogg"></audio>
<img id="playpause" src="play.png" />

JAVASCRIPT

playpause.addEventListener('click', function () {
    document.getElementById('player').play();
    this.src = 'pause.png';
});

Here's what I have so far. I'd like to alternatively play ( document.getElementById('player').play() ) and pause ( document.getElementById('player').pause() ) the song when you click on #playpause and also change the src when playing ( play.png ) and pausing ( pause.png ).

I can use jQuery but simple Javascript I think is enough.

Answer 1

How about a flag variable?

var playing = false;
playpause.addEventListener('click', function () {
    if(!playing) {
        document.getElementById('player').play();
        this.src = 'pause.png';
    }
    else {
        document.getElementById('player').pause();
        this.src = 'play.png';
    }
    playing = !playing;
});

Answer 2

Use the paused property of the player element.

var player = document.getElementById('player');

playpause.addEventListener('click', function () {
    player[player.paused ? "play" : "pause"]();
    this.src = (player.paused ? "pause" : "play") + ".png";
});

Answer 3

HTML

<audio id="player" src="file.ogg" data-state="0"></audio>
<img id="playpause" src="play.png" />

JS

playpause = document.getElementById( 'playpause' );
audio = document.getElementById( 'player' );

playpause.addEventListener('click', function() {
    (player.dataset.state === '0') ? player.play() : player.pause(); player.dataset.state = '1';
});

Please note this is untested. Good Luck!

Answer 4

You can use 'paused' property of the Audio tag.

playpause.addEventListener('click', function () {
 var player = document.getElementById('player');
 if(player.paused){
   player.play();
   this.src = 'pause.png';
 }else{
   player.pause();
   this.src = 'play.png';
 }
});