HTML5音频暂停不起作用 [英] HTML5 Audio pause not working

问题描述

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

如果我在js控制台上手动输入暂停代码，音频将停止...所以不知道发生了什么.

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

如果我尝试这个

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

我将得到div，以便一切正常.

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>

音频标签在内部

<div class="radioAudio">

    </div>

暂停按钮就是这样

$('#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;
    }
});

推荐答案

已更新

问题在于条件检查.这两个 if 都可以运行.这意味着当满足第一个条件时( ...&& currentPlay )， currentPlay 设置为 false ，并且音频被暂停.

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.

然后，当独立执行第二次检查(！currentPlay& ... )时， currentPlay 已经 false ，因此还 满足了此条件，然后立即触发了 play()，使其看起来好像暂停不起作用.

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.

使用这样的 else 语句来解决:

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

我建议使用audio元素的实际状态进行检查，而不是检查未绑定的标志，例如:

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>

这篇关于HTML5音频暂停不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！