Shoutcast stream spectral plot in Javascript

Question

I am trying to make a live spectral plot of a SHOUTcast audio stream. I have found this page http://www.aerodynes.fr/2014/04/14/a-pure-javascript-audio-waterfall/ of someone doing almost exactly what I would like but with the audio from the sound card. How do I open a SHOUTcast stream for processing in the same way as he did? I can't seem to find info on it in the Web Audio API

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

Thanks for any advice/info.

Answer 1

You can't directly. You'll have to MacGyver some solution.

The first problem you'll run into is that you cannot connect directly to a SHOUTcast stream from most browsers. While SHOUTcast is essentially HTTP, there is one small difference that breaks compatibility, especially with more modern clients. A normal HTTP server returns a status line in its response like this:

HTTP/1.1 200 OK

SHOUTcast servers return this:

ICY 200 OK

The only way around this (assuming you need to still use SHOUTcast) is to proxy the data server-side while rewriting the response status line.

The next problem is that SHOUTcast/Icecast streams use a codec, usually MP3 or AAC in ADTS, to compress the audio into bandwidth suitable for internet streaming. The Web Audio API deals with floating point PCM samples. You will have to decode the audio stream. While this can often be done in-browser, it depends on the codec you're using. Otherwise, you'll have to do it server-side at which point you might as well do the spectrum analysis server side and stream frequency band values.

I think that the best way to handle this is to get your stream playing in an audio element or object and use that as a Web Audio API node which is then connected to your analyser node to get the spectrum. You'll want to use Icecast for your server, and you will have to transcode your streams to a couple codecs to get broader browser support.