javascript - 如何检测我的音频流是 : playing, 暂停还是结束？

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