Javascript 检测HTML5音频流何时中断或暂停

我正在尝试在Cordova应用程序上使用HTML5音频传输Shoutcast URL

我遇到的问题是：当音频流与ShoutCast URL失去连接时，似乎没有引发回调。在此阶段，音频元素显示它正在播放音频，但没有音频

代码 脚本

• 连接到互联网（例如，通过热点）并启动音频收音机
• 断开热点与Internet的连接

播放缓冲内容后，音频停止播放。但不会触发表示连接丢失的回调

• 媒体。网络状态

  为

  2

  （网络加载）

• media.playbackRate

  为

  1

  （以正常速率向前播放）

• media.readyState

  是

  4

  （有足够的数据）

• media.preload

  为

  none

我尝试的回调（在连接断开时没有触发）是：

• onstalled

• onreset

• onsuspend

• onerror

• onprogress

• onwaiting

问题-由于缺少连接而无法播放音频时，是否会触发音频回调

---

如果没有，是否有任何方法可以更新

readyState

或

networkState

？如果是这样的话，我可以设置一个计时器来检查这些值。

您确定断开连接是您真正想要的吗？音频可能会停止，并且您的连接实际上会丢失，而底层TCP连接实际上不会关闭。您可能数小时没有数据，实际上连接已断开，但TCP连接仍处于活动状态

---

相反，我建议您查看播放时间。（您的onprogress处理程序也很有效。）如果在您设置的超时（10秒或适合您的情况的任何时间）后该值没有增加，则清除音频播放器并尝试重新连接。

当使用HTML5音频播放受支持的音频流时，判断音频是否正在播放的最佳方法是收听事件

当currentTime属性指示的时间已更新时，将触发timeupdate事件

事件仅在播放音频时激发。如果音频由于任何原因停止，

timeupdate

也不会触发

但是，浏览器支持不完整

• 在安卓5.0（Chrome48）上，

  timeupdate

  从不触发，也不会更新

  currentTime

• 在最新的桌面浏览器（Mozilla 45和Chrome 49）上，

  timeupdate

  的功能如文件所述

您可以侦听事件以重新启动流：

window.addEventListener('online', function() {
  audio.play();
});

---

你能展示一下你是如何聆听这些活动的吗？例如，Stalled应该可以工作，正如这里记录的：@RaymondCamden在问题中添加了我当前的代码。我在

initialize（）

中添加了回调。那么您是否尝试过暂停？this.media.addEventListener（“stalled”…不，我没有添加事件侦听器。我认为

onstalled

会起到相同的作用。无论如何，我会在尝试后更新问题。@RaymondCamden

this.media.addEventListener（“stalled”，..

也不会触发。它在第一次播放媒体时触发，但在我断开Internet连接时不会触发……我希望在由于缓冲或连接中断而没有播放音频时收到通知。

onwaiting

会在播放音频之前触发（因为

preload

是none）。

media.duration

和

media.currentTime

始终都是

0

，因为这是一个音频URL。回调

onprogress

也不会更新。@brad我对TCP连接有类似的问题。我不确定，但当互联网关闭时，它只发送30个请求（或30秒）之后，它停止发送请求，但如果它在30个请求之前返回，它将开始流媒体和音频播放，而不会出现问题。因此，即使互联网重新联机，它也不会播放音频。限制是什么？这是我的问题。请提供更多详细信息。我有一个使用“Cordova插件媒体”的Cordova应用程序以下代码仅在流开始时触发一次。audioStream.ontimeupdate=alert（“timeupdate-fired”）；@AndrewBucklin

timeupdate

不会在棒棒糖上触发（据我所知）

联机

事件与音频流无关。在您设计的场景中，音频流在您断开internet连接后停止播放。当internet重新联机时，“联机”事件将被触发。只要设备连接到Wi-Fi，

脱机

将不会触发；

联机

也不会触发问题是WiFi路由器和互联网之间的连接丢失的情况。

window.addEventListener('online', function() {
  audio.play();
});