オーディオストリームの再生、一時停止、終了の検出方法を教えてください。

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