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

时间:2016-02-24 08:33:07

标签: javascript cordova streaming html5-audio shoutcast

我正在尝试使用Cordova应用上的HTML5音频流式传输Shoutcast网址。

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

代码

yada('bla_bla_bla'), yada('woot') )

方案

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

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

  • 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(NETWORK_LOADING)
  • 2media.playbackRate(以正常价格向前播放)
  • 1media.readyState(HAVE_ENOUGH_DATA)
  • 4media.preload

我尝试过的回调(连接丢失时没有触发)是:

  • none
  • onstalled
  • onreset
  • onsuspend
  • onerror
  • onprogress

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

如果没有,是否有任何方法可以更新onwaitingreadyState?如果是这样,我可以设置一个计时器来检查这些值。

4 个答案:

答案 0 :(得分:4)

您确定失去连接实际上是您想要的吗?音频可以停止,您的连接有效丢失,而实际上没有关闭底层TCP连接。您可能没有数小时的数据,实际上是死连接,但仍然有TCP连接处于活动状态。

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

答案 1 :(得分:2)

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

  

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

只有在播放音频时才会触发事件。如果由于任何原因音频停止,timeupdate也不会触发。

,浏览器支持尚未完成。

  • 在Android 5.0(Chrome 48)上,timeupdate永远不会触发,currentTime也不会更新。
  • 在最新的桌面浏览器(Mozilla 45和Chrome 49)上,timeupdate的功能已记录在案。

答案 2 :(得分:0)

html5音频有下一个事件:可能是1月,onabort,oninvalid,onplaying,onreset,onseeking,可以帮忙吗?

onabort oncanplay oncanplaythrough 平变化 ondurationchange onemptied onended oninput oninvalid onkeydown事件 onkeypress事件 的onkeyup 负载 onloadeddata onloadedmetadata onloadstart onmousedown事件 OnMouseEnter在 OnMouseLeave在 的OnMouseMove 的onmouseout 的onmouseover onmouseup 在onPause onplay onplaying onprogress onratechange onreset 在onResize onscroll onseeked onseeking ONSELECT 展出 onstalled 的onsubmit onsuspend ontimeupdate onvolumechange onwaiting onmozfullscreenchange onmozfullscreenerror onmozpointerlockchange onmozpointerlockerror 的onerror 的onclick oncontextmenu onfocus此 ondrag当 ondragend ondragenter ondragleave

答案 3 :(得分:-2)

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

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