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;
    }
});

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;
    }
});

• javascript
• html
• audio

• Could you also show parent divs if any? as well as relevant html for button, placement of script – user1693593 Commented Jun 4, 2015 at 21:32
• Seems like a window.onload issue. Is your javascript wrapped in a window.onload? If you are using jQuery you might need to use $(window).load. But if the pause is triggered by a user event that won't matter – Downgoat Commented Jun 4, 2015 at 21:32

2 Answers 2

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

Try to use this:

var audio = document.getElementById("yourAudio"); 

function pauseAudio() { 
    audio.pause(); 
}