在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）将音频压缩为适合互联网流的带宽。 Web Audio API处理浮点PCM样本。您必须解码音频流。虽然这通常可以在浏览器中完成，但这取决于您使用的编解码器。否则，您必须在服务器端执行此操作，此时您可以执行频谱分析服务器端和流频带值。

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