如何检测我的音频流是否：正在播放、暂停或完成？

Question

我正在开发一个在线广播网站，并试图检测音频播放器当前对用户的状态。

我当前的设置在知道这一点时通常是错误的，如果我在 iOS 上并且我从锁屏播放器暂停，它仍然会认为它正在播放，因为我从未点击过 html 暂停按钮。

最后，如何检测我的流何时完全结束。我试过：onstalled=""、onwaiting=""、onerror=""、onended=""。但它们都不是 100% 工作的。最接近工作的是：onstalled=""，但即使这样也只有 60% 左右的成功率（有时当我加载网站时它会告诉我它已经结束）。

HTML：

<audio autoplay="" id="player" title="" oncanplay="radioLoaded()">
    <source src="...">
</audio>

Javascript：

function radioLoaded() {
    if (player.paused) {
        document.getElementById('radioplaypause').innerHTML = varRadioResume;
    } else if (player.play) {
        document.getElementById('radioplaypause').innerHTML = varRadioPause;
    } else {
        document.getElementById('radioplaypause').innerHTML = varRadioLoading;
    }

    window.player = document.getElementById('player');
    document.getElementById('radioplaypause').onclick = function () {
        if (player.paused) {
            player.play();
            this.innerHTML = varRadioPause;
        } else {
            player.pause();
            this.innerHTML = varRadioResume;
        }
    }
};

function radioEnded() { 
    document.getElementById('radiolivetext').innerHTML = 'OFFLINE';
    document.getElementById('radioplayer').style.display = 'none';
    document.getElementById('radioinformation').style.display = 'none';
};

Answer 1

试试这个，一般对代码进行一些更正/注释：

function radioLoaded() {

    // move this line to the top
    window.player = document.getElementById('player'); // !!! <-- name too generic, possibility of global collisions

    var playPauseButton = document.getElementById('radioplaypause');

    if (player.paused) {
        playPauseButton.innerHTML = varRadioResume;
    } else if (player.play) {
        playPauseButton.innerHTML = varRadioPause;
    } else {
        playPauseButton.innerHTML = varRadioLoading;
    }

    playPauseButton.onclick = function () {
        if (player.paused) {
            player.play();
            this.innerHTML = varRadioPause;
        } else {
            player.pause();
            this.innerHTML = varRadioResume;
        }
    };

    player.onended = function () {
        console.log('ended');
    };

    // other helpful events
    player.onpause = function () {
       console.log('paused...');
    }

    player.onplay = function () {
       console.log('playing...');
    }

    player.onprogress = function (e) {
       console.log(e.loaded + ' of ' + e.total + ' loaded');
    }
};