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

Question

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

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

代码

Radio = {
    initialized: false,
    isBuffering: false,
    interrupted: false,
    isPlaying: false,
    media: null,
    trackName: '',
    url: 'shoutcast_url',
    initialize: function () {
        if (!this.media) {
            this.media = new Audio(this.url);

            this.media.preload = "none";

            this.media.onerror = function (e) {
                App.alert("Unable to connect to Radio");
                Radio.interrupt();
            };

            this.media.onwaiting = function (e) {
                Radio.set_buffering(true);
            };

            this.media.onplaying = function (e) {
                Radio.set_buffering(false);
            };
        }
    },
    set_buffering: function (value) {
    ...
    }

场景

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

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

• media.networkState 是 2 (NETWORK_LOADING)
• media.playbackRate 是 1（以正常速率播放）
• media.readyState 是 4 (HAVE_ENOUGH_DATA)
• media.preload 是 none

我尝试的回调（连接丢失时没有触发）是：

• onstalled
• onreset
• onsuspend
• onerror
• onprogress
• onwaiting

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

如果没有，有什么方法可以更新readyState 或networkState？如果是这样，我可以设置一个计时器来检查这些值。

Answer 1

您确定失去连接确实是您想要的吗？音频可能会停止，并且您的连接实际上会丢失，而底层 TCP 连接实际上并未关闭。您可能有几个小时没有数据，实际上是死连接，但该 TCP 连接仍然处于活动状态。

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

Answer 2

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

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

该事件仅在播放音频时触发。如果由于任何原因音频停止，timeupdate 也不会触发。

但是，浏览器支持还不完善。

• 在 Android 5.0 (Chrome 48) 上，timeupdate 永远不会触发，currentTime 也不会更新。
• 在最新的桌面浏览器（Mozilla 45 和 Chrome 49）上，timeupdate 的功能与文档一致。

Answer 3

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

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