最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - HTML5 Audio pause not working - Stack Overflow

programmeradmin4浏览0评论
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;
    }
});
Share Improve this question edited Jun 4, 2015 at 21:53 Raggaer asked Jun 4, 2015 at 21:25 RaggaerRaggaer 3,3188 gold badges40 silver badges68 bronze badges 2
  • 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
Add a ment  | 

2 Answers 2

Reset to default 3

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(); 
}
发布评论

评论列表(0)

  1. 暂无评论