Javascript 爱奥尼亚3：播放Icecast/Shoutcast音频流

我正在使用Ionic 3框架开发一个互联网广播应用程序。我想出了这个使用HTML5音频元素的简单代码。许多人认为，这种方法比使用爱奥尼亚原生/流媒体插件要好

以下是我的实施：

HTML

<audio id="audioStream" src="http://icecastserverIP:8000/icecastchannel" autoplay></audio>

<a href="#" id="player">
  <div class="btn-play" id="con-btn-play">
    <img src="assets/img/btn-play.png" alt="Play">
  </div>
</a>

JS

$(document).ready(function(){

    var audio = $('#audioStream')[0]


    // Preloader animation

    audio.addEventListener('waiting', function () {
        $('#con-btn-play').html('<img src="assets/img/preloader.gif">');
    }, false);
    audio.addEventListener('playing', function () {
        $('#con-btn-play').html('<img src="assets/img/btn-pause.png">');
    }, false);


    // Play button behaviour

    $('#player').click(function(){
        if (audio.paused){
            audio.play();
            $('#con-btn-play').html('<img src="assets/img/btn-pause.png" alt="Pause">');
        }else {
            audio.pause();
            $('#con-btn-play').html('<img src="assets/imgs/btn-play.png" alt="Play">');
        }
    });

});

$（文档）.ready（函数（）{
var audio=$（'#audioStream'）[0]
//预加载动画
audio.addEventListener（'waiting'，函数（）{
$（'#con btn play'）.html（''；
}，假）；
audio.addEventListener（'playing'，函数（）{
$（'#con btn play'）.html（''；
}，假）；
//播放按钮行为
$（“#播放器”）。单击（函数（）{
如果（音频暂停）{
音频播放（）；
$（'#con btn play'）.html（''；
}否则{
audio.pause（）；
$（'#con btn play'）.html（''；
}
});
});

该流在Android和iOS中运行良好。但是，只要稍有一点连接断开，音频就会停止，无法重新连接。更不用说，如果我按pause，流将继续在后台使用数据

我的问题是：有没有更好的方法来处理冰流？为了更好的缓冲管理和游戏体验，您会推荐一个第三方插件吗

但是，只要稍有一点连接中断，音频就会停止，无法重新连接

通过处理音频元素上的

错误

事件，您可以重新连接自己的代码

更不用说，如果我按pause，流将继续在后台使用数据

是的，您需要创建自己的UI来控制此元素。当有人暂停时，您需要调用

.stop（）

。默认情况下，audio元素假定一个在某个点结束的常规音频文件

第三方插件

没有插件需要

…更好的缓冲管理和游戏体验

有了我在这个答案中提出的两个建议，您可以为您的用户提供有用的体验。然而，还有两个问题你还没有触及，你可能会遇到

首先，浏览器不会请求或解码常规ICY元数据

第二个问题是，由于浏览器将您的流视为常规音频文件，因此它还将所有音频数据缓冲到内存中。这对于您永远不会返回并播放以前播放的音频的实时流来说不是很有用。（这很少是您遇到的问题，因为音频数据需要相对较少的内存，但问题确实存在。）

---

这两个问题都通过使用解决。使用MSE，您可以直接控制检索数据、解组元数据以及将数据推送到缓冲区进行回放。由于您的代码处于控制之中，因此您可以无限期地进行流式处理，而不会出现内存泄漏。

我建议您首先在Icecast服务器设置中增加

和

的值

默认情况下，服务器在连接时只向客户端发送64kb的音频流作为缓冲区，对于320kbps的mp3流，缓冲时间小于2秒

---

如果您想尝试，请设置

的预加载标记。
如果您感兴趣，我有基于MediaSource扩展的代码，您可以为商业项目授权。请随时与我联系brad@audiopump.co.  否则，请参阅下面我的答案，以便自己开始实施类似的东西。谢谢Brad！如果你指的是Icecast/Shoutcast元数据，那么我使用的插件是WaveStreaming（jquery.Shoutcast.js）的伙计们完成的。唯一的问题是歌曲更改时没有正确同步，但正如您所说，这在此时并不重要。您所说的
.stop（）
是什么？我只梦想过这样的生活simplicity@miknik啊，对不起！我刚刚意识到这在我自己的代码中。我现在手头没有，但我相信我正在破坏音频元素。稍后我会再次检查。没错，我检查了HTML音频标记上是否不存在
.stop（）
属性。如果您能与我们分享一份公开回购协议或一些代码片段，我将不胜感激。非常感谢布拉德！如果所讨论的Icecast服务器运行的是2.4.2版或更高版本，您还可以在/status JSON.xsl？mount=/mountpointname处查询JSON api以获取当前元数据。请注意，这表示服务器上该精确时间点的元数据。客户端缓冲可能意味着您的播放时间点偏移了60秒。