I'm trying to make a simple radio player which should stream a public domain online radio in pure JavaScript. I found one here.
I've added a simple <audio> player which have the url retrieved from the site as src. It is an .aac file. I've read that some streaming channels send informations about the author, the song and more through the audio chunks while streaming, so I think that these information can be periodically retrieved in the timeupdate event of the audio control, however I have no idea if this is true and how it could be done, as I searched the internet without finding anything. I have this simple code:
<audio id="audPlr">
<source src="http://relay.publicdomainradio.org:80/jazz_swing.aac">
</audio>
<script>
var msc = document.getElementById("audPlr");
msc.play();
</script>
It works, but I need to display those informations.
EDIT:
I managed to make a very simple player with metadata thanks to Brad's help and Icecast Metadata JS, the code is the following
<!DOCTYPE html>
<head></head>
<script src="icecast-metadata-player/icecast-metadata-player-1.12.2.min.js"></script>
<script>
const onMetadata = (metadata) => {
document.getElementById("metadata").innerHTML =
metadata.StreamTitle;
};
const player =
new IcecastMetadataPlayer(
"https://ice2.somafm.com/dronezone-128-mp3",
{ onMetadata }
);
</script>
<body>
<button onclick="player.play();"> Play </button>
<button onclick="player.stop();"> Stop </button>
<p> Now Playing: <span id="metadata"></span> </p>
</body>
</html>
When i try to get metadata from https://ice2.somafm.com/dronezone-128-mp3, it works perfectly, but when I try from, for example, https://deeperlink.com:8082/stream I got No 'Access-Control-Allow-Origin' header is present on the requested resource error.
I think I need to set the custom header in the IcecastMetadataPlayer request, but I don't know how to do it.
It isn't a file. This is just a URL convention being used. What you have is actually a Icecast server sending you AAC audio within an ADTS stream. Metadata is sent at a regular interval, if requested. Add this header to your request data:
Then in the response headers, you'll see something like:
That means, every 8,192 bytes there will be a metadata block.
The easiest way to implement this sort of player on the web is to use MediaSource Extensions.
Check out Ethan's repo here, for an implementation example: https://github.com/eshaz/icecast-metadata-js