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。 / p>

您可能正在寻找的事件包括：

networkState，readyState无法用于音频流

1 个答案: