HTML5音频暂停不工作

Question

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

这是目前没有暂停音频，而这工作正常播放它

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

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

如果我尝试这个

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

我将得到div，所以一切看起来都很好。

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

Answer 1

更新

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

然后当第二个检查独立运行之后(!currentPlay && ...)， currentPlay是已经 false，所以这个条件是也满足，然后play()被立即触发，使它看起来好像暂停没有工作。

用else语句求解:

$('#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元素的实际状态来检查，而不是使用未绑定的标志，例如:

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

Answer 2

试着用这个:

var audio = document.getElementById("yourAudio"); 
function pauseAudio() { 
    audio.pause(); 
}