networkState, readyState не работает для аудиопотока

Question

Я пытаюсь проверить аудиопоток, чтобы увидеть, активен ли он.Сервер включен и транслирует аудио, либо он выключен и не транслируется.Я нашел два метода .networkState и .readyState, которые работают с аудио-тегом или объектом Audio ().Все выглядит хорошо, когда поток отключен и никогда не прослушивается (не в кеше браузера).У меня есть оба метода, выполняемые каждые 4 секунды, чтобы отследить любое изменение в статусе потока, потому что я хочу постоянно отслеживать любые изменения и обновлять веб-страницу.

Проблема в том, что я не могу получить ни один из методовкорректно обновлять состояние потока после его изменения, то есть с выключенного на включенный или с выключенного на.Я должен обновить страницу, чтобы получить реальное обновление.Затем, после прослушивания потока и его кэширования, он всегда отображается как «вкл».

Почему ни один из этих методов правильно не обнаруживает изменение потока?Есть ли способ принудительной проверки фактического объекта вместо кэшированного объекта?

(извините за мой код - я быстро разбил это на части и я новичок) (я пробовал больше, чем показано ниже, но пробовалсделать этот пост лаконичным.)

<script>
var myTimerVar = setInterval(myTimer, 4000);
var myFunctionVar = setInterval(myFunction, 4000);
// var aud = new Audio('http://myserver.com:8080/live.mp3');

function myTimer() {
    var acheck = document.getElementById("myAudio").networkState;
    if (acheck == 1) {
      document.getElementById("netstate").innerHTML = "ONLINE " + acheck;
      document.getElementById("netstate").style.backgroundColor = "MediumSeaGreen";
    }
    else if (acheck == 3) {
      document.getElementById("netstate").innerHTML = "OFFLINE " + acheck;
      document.getElementById("netstate").style.backgroundColor = "yellow";
    }
}

function myFunction() {
    var x = document.getElementById("myAudio").readyState;
    if (x == 0) {
      document.getElementById("readystate").innerHTML = "OFFLINE " + x;
      document.getElementById("readystate").style.backgroundColor = "yellow";
    }
    else if (x == 4) {
      document.getElementById("readystate").innerHTML = "ONLINE " + x;
      document.getElementById("readystate").style.backgroundColor = "MediumSeaGreen";
    }
}
</script>

<audio id="myAudio" controls>
  <source src="http://myserver.com:8080/live.mp3" type="audio/mpeg">
</audio>

<!-- this is what does not update correctly on the page -->
<p>StreamN0 is: <span id="netstate">OFFLINE</span></p>
<p>StreamR0 is: <span id="readystate">OFFLINE</span></p>

Answer 1

У меня есть оба метода, выполняемые каждые 4 секунды, чтобы отследить любое изменение в статусе потока

Во-первых, рассмотрите возможность использования события readystatechange.

const readyStates = {
  0: 'HAVE_NOTHING',
  1: 'HAVE_METADATA',
  2: 'HAVE_CURRENT_DATA',
  3: 'HAVE_FUTURE_DATA',
  4: 'HAVE_ENOUGH_DATA'
}

document.querySelector('audio#myAudio').addEventListener('readystatechange', (e) => {
  document.querySelector('#readyState').innerText = readyStates[e.readyState];
});

Проблема в том, что я не могу получить ни один метод для правильного обновления состояния потока после его изменения, то есть от выключенного к включенному или от включенного к выключенному.

То, о чем я думаю , вы спрашиваете, действительно ли поток в прямом эфире ... онлайн или нет.Это не то, что указывает readyState.Браузер на самом деле не знает, что вы играете в прямом эфире.Предполагается, что данные, которые кешируются, предназначены для воспроизведения.readyState из HAVE_ENOUGH_DATA (4) просто означает, что браузер считает, что он достаточно буферизовал медиафайл, а скорость, с которой он буферизован, означает, что он может продолжать воспроизведение без перерыва .

События, которые вы, вероятно, ищете, включают:

• playing
• waiting
• ended
• emptied
• stalled