javascript - Javascript中的Shoutcast流频谱图

Question

我正在尝试制作SHOUTcast音频流的实时频谱图。我发现此页面http://www.aerodynes.fr/2014/04/14/a-pure-javascript-audio-waterfall/几乎有人在完全按照我的意愿去做，但是使用了声卡中的音频。如何以与他相同的方式打开SHOUTcast流进行处理？我似乎无法在Web Audio API中找到有关它的信息

// Open the microphone
function init() {
    var audioConstraints = {
        audio: true
    };
    getUserMedia(audioConstraints, gotStream);
}
...

感谢您的任何建议/信息。

Answer 1

您不能直接这样做。您将需要MacGyver一些解决方案。

您会遇到的第一个问题是，您无法从大多数浏览器直接连接到SHOUTcast流。虽然SHOUTcast本质上是HTTP，但有一个小的差异破坏了兼容性，尤其是对于更现代的客户端。普通的HTTP服务器在其响应中返回一条状态行，如下所示:

HTTP/1.1 200 OK

SHOUTcast服务器返回以下内容:

ICY 200 OK

唯一的方法(假设您仍需要使用SHOUTcast)是在重写响应状态行时代理数据服务器端。

下一个问题是SHOUTcast / Icecast流使用编解码器(通常是ADTS中的MP3或AAC)将音频压缩为适合Internet流传输的带宽。 Web Audio API处理浮点PCM示例。您将必须解码音频流。尽管这通常可以在浏览器中完成，但这取决于您使用的编解码器。否则，您将不得不在服务器端执行此操作，此时，您还可能需要在频谱分析服务器端和流频带值上进行操作。

我认为处理此问题的最佳方法是让流在音频元素或对象中播放，并将其用作Web Audio API节点，然后将其连接到分析仪节点以获取频谱。您将要在服务器上使用Icecast，并且必须将流转码为几个编解码器，以获得更广泛的浏览器支持。