HTML5 Audio pause not working

Question

document.getElementById('s/' + currentRadio + '/' + currentSong).pause();

This is currently not pausing the audio while this works fine playing it

document.getElementById('s/' + currentRadio + '/' + currentSong).play();

If I manually enter on the js console the pause code the audio will stop... so no idea whats goin on.

If I try this

console.log(document.getElementById('s/' + currentRadio + '/' + currentSong));

I will get the div so everything seems okey.

<audio class="playSong" id="s/0/0" src="/music/Playback FM/Big Daddy Kane - Warm It Up, Kane.mp3"></audio>

The audio tag are inside

<div class="radioAudio">

    </div>

And the pause button is made like this

$('#tuneRadioPause').click(function(e) {
    if(currentSong !== -1 && currentPlay) {
        console.log("s/" + currentRadio + "/" + currentSong)
        document.getElementById('s/' + currentRadio + '/' + currentSong).pause();
        currentPlay = false;
    }

    if(!currentPlay && currentSong !== -1) {
        document.getElementById('s/' + currentRadio + '/' + currentSong).play();
        currentPlay = true;
    }
});

Answer 1

Updated

The problem is the conditional checks. Both if's are run regardless. This means that when the first condition is met (... && currentPlay) currentPlay is set to false and audio is paused.

Then when the second check is run right after independently (!currentPlay && ...), currentPlay is already false so this condition is also met and then play() is triggered right away making it appear as if pause didn't work.

Solve by using an else statement like this:

$('#tuneRadioPause').click(function(e) {
    if(currentSong !== -1 && currentPlay) {
        console.log("s/" + currentRadio + "/" + currentSong)
        document.getElementById('s/' + currentRadio + '/' + currentSong).pause();
        currentPlay = false;
    }

    else if(!currentPlay && currentSong !== -1) {          // else here!!
        document.getElementById('s/' + currentRadio + '/' + currentSong).play();
        currentPlay = true;
    }
});

I would recommend using the actual status of the audio element to check though rather than unbound flags, for example:

$('#tuneRadioPause').click(function(e) {
    if (currentSong < 0 || currentRadio < 0) return;

    var audio = document.getElementById('s/' + currentRadio + '/' + currentSong);
    if (null === audio || audio.readyState === audio.HAVE_NOTHING) return;

    if(!audio.paused && !audio.ended) {
        audio.pause();
    }
    else if (audio.paused) {
        audio.play();
    }

    //currentPlay = !audio.paused;  // not needed anymore, but may somewhere else?
});

var currentSong = 0, currentRadio = 0;

document.getElementById('s/' + currentRadio + '/' + currentSong).oncanplay = function() {$('#tuneRadioPause')[0].disabled = false}

$('#tuneRadioPause').click(function(e) {
    if (currentSong < 0 || currentRadio < 0) return;

    var audio = document.getElementById('s/' + currentRadio + '/' + currentSong);
    if (null === audio || audio.readyState === audio.HAVE_NOTHING) return;

    if(!audio.paused && !audio.ended) {
        audio.pause();
    }
    else if (audio.paused) {
        audio.play();
    }

    //currentPlay = !audio.paused;  // not needed anymore, but may somewhere else?
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio preload="auto" class="playSong" id="s/0/0" src="https://github.com/epistemex/free-music-for-test-and-demo/blob/master/music/kf_colibris.mp3?raw=true"></audio><br>
<button disabled id="tuneRadioPause">Play / Pause</button>