12

I am using audio element to stream an ogg source from an icecast server. Does the audio element extract icy metadata and is there a way to access it through javascript?

Basically, I want to show "currently playing" information of a radio station I am streaming. What are my options?

Thanks!

Roman Semko
  • 1,541
  • 5
  • 18
  • 27

2 Answers2

7

No, your HTML5 elements are only aware of the stream data, and aren't even making the appropriate request to fetch the metadata.

See these posts:

Now, this isn't impossible by any means. You just have to do it server-side. (See that second link in particular.)

I should also point out that on a full-blown SHOUTcast Server (haven't tested with Icecast, but its worth a try) generates "7.html" which contains data on the number of listeners, max listeners, peak listeners, stereo/mono, bitrate, and current track name as comma-separated values. Like this:

2,1,33,625,2,128,J Mascis - Not Enough

If you can fetch http://yourstreamingserver:port/7.html, then you can get this data very easily.

Community
  • 1
  • 1
Brad
  • 159,648
  • 54
  • 349
  • 530
  • 1
    A problem is show the song name in real time synced with audio stream, this is not possible reading from shoutcast server (7.html), real time only is possible reading the meta information embedded in the audio stream. I would be happy reading the metadata with javascript/html5 – Jose Nobile Jul 20 '13 at 20:14
  • 1
    @JoseNobile, Unfortunately, you don't have a choice... at least not if you want compatibility. You could use one of the browser-implemented codecs and hack some headers onto your stream to support CORS, and then deal with the overhead of a pure JS codec. That isn't feasible for most. Also keep in mind that by the nature of SHOUTcast-style metadata, it isn't perfectly in sync anyway. You could also do something server-side with long-polling AJAX (like Socket.IO). – Brad Jul 20 '13 at 21:14
  • using AJAX to get streaming is not possible due restrictions of protocol, domain and port. Shoutcast server doesn't has way to add custom headers as Access-Control-Allow-Origin: * (to use CORS) I sent the feature request to Google Chrome forum http://productforums.google.com/forum/#!category-topic/chrome/give-feature-feedback-and-suggestions/windows/AJQl3pwgriI – Jose Nobile Jul 29 '13 at 00:36
2

In case of an Ogg container stream (So both Vorbis and Opus), at least Firefox supports javascript access to the metadata. This is currently only "vendor specific" Javascript API: audio.mozGetMetadata();

On the other hand if you go with Icecast 2.4.1 you can access metadata independently through a JSON API. Lack of synchronization as pointed out in other comments applies. It's usually "close enough" though.

TBR
  • 2,790
  • 1
  • 12
  • 22