Wie kann ich erkennen, ob mein Audio-Stream ist: Wiedergabe, Pause oder beendet?

Question

Ich arbeite an einer Online-Radio-Website und versuche herauszufinden, in welchem ​​Status der Audio-Player derzeit für den Benutzer ist.

Die aktuelle Einrichtung, die ich habe, ist oft falsch in dies zu wissen, und wenn ich auf iOS bin und ich pausiere vom Sperrbildschirm Player stattdessen, es wird immer noch denken, es spielt, weil ich nie die HTML-Pause-Taste geklickt habe.

Endlich wie ist es möglich zu erkennen, wenn mein Stream vollständig beendet ist. Ich habe versucht: onstalled="", onwaiting="", onerror="", onended="". Aber keiner von ihnen arbeitet 100% der Zeit. Der nächste, der am besten funktioniert, wäre: onstalled="", aber selbst das hatte nur eine Erfolgsquote von 60% (manchmal, wenn ich die Seite lade, würde es mir sagen, dass sie beendet ist).

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

die Sie interessieren, mit einigen Korrekturen/Hinweise zum Code im Allgemeinen:

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