0

I want to reproduce audio streams with the <audio> tag and display the name of the current track. To that end I have been using the audio's audioTracks property.

I know that this feature is experimental and I went out of my way to enable it.

In Epiphany ( Gnome Web ) the feature works flawlessly ( without even needing to enable it first ), but in Chrome and Firefox the AudioTrack's label property is always empty.

Is Chrome's and Firefox's implementation broken? Is there some other api I may use to retrieve the track's name?

How I am retrieving it:

document.getElementById('audio').audioTracks[0].label;
Brad
  • 159,648
  • 54
  • 349
  • 530
Adinan
  • 135
  • 10
  • 1
    Not all tracks are going to have a label. What sort of stream are you using that has this enabled? – Brad Feb 06 '21 at 20:40
  • @Brad Internet radio. I know that not all of them will have labels, but Chrome show empty labels in the ones I know do have. – Adinan Feb 06 '21 at 20:43
  • 1
    What kind of internet radio? I don't know of any internet radio station that has multiple tracks. It's more of an on-demand sort of stream where there will be a main track, a commentary track, perhaps another language, etc. Do you have an example of a stream you're using? – Brad Feb 06 '21 at 20:57
  • 1
    Are you by chance confusing a track, in terms of the stream and container, and a track as in a song and its metadata that is currently playing? – Brad Feb 06 '21 at 20:58
  • @Brad For example: http://s9-webradio.rockantenne.de/heavy-metal When associated to a ` – Adinan Feb 06 '21 at 21:10
  • Ok, for that, you need to create your own client that handles the ICY metadata. No mainstream browser does this on its own. There are two ways to go about it. One is to get that metadata server-side. This will work with any of the streams. Here's some info: https://stackoverflow.com/a/4914538/362536 And: https://stackoverflow.com/a/44090879/362536 The other way to do this is to use MediaSource Extensions, but that only works for streams have CORS properly enabled... and few do. – Brad Feb 06 '21 at 21:52
  • @Brad. There is this [library](https://github.com/eshaz/icecast-metadata-js) to read icecast metadata directly from the browser. Unfortunately is hindered by cors policy, so it is of no use to me. Server side it is then, my initial tests went full 4 seconds to retrieve the information on the stream. Must limit server requests as much I can, I wonder if I can detect music transition with the audio api... – Adinan Feb 08 '21 at 20:39
  • 1
    It should not take 4 seconds to retrieve information from the stream. The metadata should be available in the first ICY metadata chunk, which is usually available after 8KB of data, which should be well within the initial buffer size. In other words, you shouldn't need more than a packet or two. – Brad Feb 08 '21 at 21:02

1 Answers1

0

I've came across this library by Eshaz showing that is possible to retrieve meta data directly from the browser. But unfortunately CORS policies must be properly set to work.

Like Brad pointed out, the best option is retrieve the information from the server side.

Here hoping the AudioTrack feature turn mainstream in the near future. Thank you @Brad for all the help.

Adinan
  • 135
  • 10
  • Now the question is the optimization of the ajax requests. To that end I am planing to use the Audio API to help me detect when a song ends and another begins. – Adinan Feb 08 '21 at 23:07