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) 仅表示浏览器认为它已充分缓冲媒体，而它的缓冲速率意味着它认为它可以 continue to play without interruption。

您可能正在寻找的活动包括：

• playing
• waiting
• ended
• emptied
• stalled