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

Could you also show parent divs if any? as well as relevant html for button, placement of script — , Jun 04 '15 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, Jun 04 '15 at 21:32

score 3 · Accepted Answer · 2015-06-04T23:49:09.550

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>

score 1 · Answer 2 · answered Jun 04 '15 at 21:30

1

Try to use this:

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

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

answered Jun 04 '15 at 21:30

user1911

680
1
14
36

HTML5 Audio pause not working

2 Answers2

Linked