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

Question

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

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

代码

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) {
    ...
    }

场景

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

播放缓冲内容后，音频停止播放。但是没有触发指示连接丢失的回调。

• 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。

The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.

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

但是，浏览器支持不完整。

• 在 Android 5.0 (Chrome 48) 上，timeupdate 从不触发，也不 currentTime 更新。
• 在最新的桌面浏览器（Mozilla 45 和 Chrome 49）上，timeupdate 功能如文档所述。

Answer 3

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

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