如何检测我的音频流是:正在播放、暂停还是已完成

How can I detect whether my audio stream is: playing, paused or finished?

本文关键字：播放 暂停 已完成 检测 音频流 我的 何检测      更新时间：2023-09-26

我正在一个在线广播网站上工作，并试图检测用户的音频播放器当前处于什么状态。

我目前的设置经常是错误的，因为我知道这一点，如果我在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';
};

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

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');
    }
};
相关文章：