1

Hi I am wondering how in javascript or reactjs would I read data from a streaming station?

I have googled sadly I have had no luck and I was wondering if anyone knows of a script that can read (icecast ICY metadata?)

RussellHarrower
  • 6,470
  • 21
  • 102
  • 204

3 Answers3

3

Please note that web browsers don't support ICY metadata, so you'd have to implement quite a few things manually and consume the whole stream just for the metadata. I do NOT recommend this.

As you indicate Icecast, the recommended way to get metadata is by querying the JSON endpoint: /status-json.xsl. It's documented.

It sounds like you are custom building for a certain server, so this should be a good approach. Note that you must be running a recent Icecast version (at the very least 2.4.1, but for security reasons better latest).

If you are wondering about accessing random Icecast servers where you have no control over, it becomes complicated: https://stackoverflow.com/a/57353140/2648865

If you want to play a stream and then display it's ICY metadata, look at miknik's answer. (It applies to legacy ICY streams, won't work with WebM or Ogg encapsulated Opus, Vorbis, etc)

TBR
  • 2,790
  • 1
  • 12
  • 22
  • Why would you have to consume the whole stream just for the metadata? The server splices the metadata into the mp3 stream, you just have to separate them out again and you have the audio and the metadata from a single stream – miknik Aug 24 '19 at 02:12
  • If you *just* need the metadata, then you still need to pull the whole stream, just to render metadata. If you don't display metadata until the stream starts playing and are willing to do all the handling and possibly parsing of Ogg or WebM/MKV containers, then it's not overhead. The pragmatic approach has been so far to do out of band metadata as then you can display it also without the stream being played. – TBR Aug 24 '19 at 07:44
  • Ah I see what you mean. I'd never really envisaged a scenario where you might want the metadata without playing the stream. The only issue with out of band metadata is keeping it in sync with the audio stream becomes a challenge if the client starts buffering or your icecast server pushes more than a few seconds of the stream to the client upon connection – miknik Aug 24 '19 at 11:41
  • Yes, if you are playing back a stream then having access to in-band metadata would be preferable. The situation has been bad in browsers though. // Most of the time those "Now playing" widgets outside of web players don't need to be accurate, so a few seconds of offset don't matter. – TBR Aug 27 '19 at 19:59
2

I wrote a script that does exactly this.

It implements a service worker and uses the Fetch API and the Readable Streams API to intercept network requests from your page to your streaming server, add the necessary header to the request to initiate in-stream metadata from your streaming server and then extract the metadata from the response while playing the mp3 via the audio element on your page.

Due to restrictions on service workers and the Fetch API my script will only work if your site is served over SSL and your streaming server and website are on the same domain.

You can find the code on Github and a very basic demo of it in action here (open the console window to view the data being passed from the service worker)

miknik
  • 5,748
  • 1
  • 10
  • 26
  • Nice to see that such things have become feasible in browsers! Just as a humble request, please make it clear that this only works on ICY legacy metadata for Icecast. It will not work for proper rich metadata sent in the container for MKV or Ogg (Opus, Vorbis, Speex, etc.). – TBR Aug 24 '19 at 07:47
  • As I read it that's what the OP was asking for. I've no idea how icecast reacts to the request containing the additional header required to initiate in stream metadata on anything other than an mp3 stream so I bow to your greater knowledge in that respect. When I wrote the script I remember finding the information on how the ICY protocol embeds the metadata into the stream was not easy to find, I seem to recall trawling hobbyist websites from the early noughties to get any of the info. Took me back to my winamp days – miknik Aug 24 '19 at 11:49
0

I don't know much about stream's but I've found some stuff googling lol

https://www.npmjs.com/package/icy-metadata

https://living-sun.com/es/audio/85978-how-do-i-obtain-shoutcast-ldquonow-playingrdquo-metadata-from-the-stream-audio-stream-metadata-shoutcast-internet-radio.html

also this

Developing the client for the icecast server its for php but maybe you can translate it to JS.

Carlos Franco
  • 58
  • 1
  • 1
  • 11