how to extract artist name metadata from mp4 stream?

[candycanearter07]

hi,

how would i go about extracting the artist name metadata from an mp4 stream in a sane way without using an npm package?

edit: after a lot more investigation it looks like i have to parse ICY metadata from the stream somehow
edit2: also i need to figure out either another chiptune internet radio station or how to make it accept a http stream

[Melooon]

This is a super cool question and I'd love to know more about it! I hope you'll share your code and findings when you figure it out 

[candycanearter07]

WAIT OMG I ACTUALLY DID IT!!

Apparently, the metadata is just stored as ASCII inside the stream, so literally I just set up a loop to continuously retrieve data from the server, regex it for "StreamTitle", then saved that to a string!!

Note: IDK if it's just the server I'm using, but it does seem to only send the StreamTitle tag when you first connect and when the song changes, so you will have to be careful with that. Also, it seems to always output a StreamTitle of <empty string> when you first connect, tho that gets updated in a few seconds.

Also, this doesn't actually play the stream, you'll have to get a seperate <audio> tag to do that. I could probably figure out how to stream the data to an audio tag manually, but that would be infinitely harder.

code:

Code

async function readConstant(readableStream) {
  const reader = readableStream.getReader();
  const re = /StreamTitle='(.*)'/;

  while (true) {
    const { done, value } = await reader.read();
    if (done) { break; }

    // data is retrieved as a uint8 array, which we convert to str
    let cur = new TextDecoder("utf-8").decode(value);
    var fin = re.exec(cur);
    if (!fin) { continue; }

    // for some reason, the regex sometimes captures some unprintable chars after the end so we split on the single quote
    fin = fin[1].split('\'')[0];
    console.log(fin);
    document.getElementById("player-text").innerHTML = fin;
  }
}

var opts = { headers: {} };
opts["headers"]["Icy-MetaData"] = "1";
// this is the 64kbps version to save some bandwidth
let mustr = fetch("https://radio.erb.pw/listen/subspace/radio-64.mp3", opts);
mustr.then((res) => { readConstant(res.body) });

[candycanearter07]

ironically now im having issues with actually playing the dang thing?? it keeps saying my function isnt defined :(

Code

<div id="player">
    <span id="player-text"></span>
    <a onclick="stopEr();" href="javascript:void(0)">stop</a>
    <a onclick="playEr();" href="javascript:void(0)">play</a>
</div>

<audio id="interadio" src="https://radio.erb.pw/listen/subspace/radio.mp3"></audio>
<script src='/assets/js/icystream.js'></script>

<script>
    var player = document.getElementById('interadio');
    var playertxt = document.getElementById('player-text');

    function playEr(){
        player.play();
        playertxt.style.display = 'inline':
    };

    function stopEr(){
        player.stop();
        playertxt.style.display = 'none';
    };
</script>

anyone know why its not working??

edit: im an idiot and colon is too similar to semicolon

[candycanearter07]

OK so ICY-Metadata is a type of metadata used to communicate the song name within an Icecast stream. Icecast streams are a type of internet streaming that only communicates an mp3 file, and is the most common way that internet radio streams are broadcasted. This type of metadata is commnicated with the TAGS element of mp3 files, being a string of ascii text embeded within the data. It can easily be extracted by matching against regex /StreamTitle:'(.*)';/ (using the javascript syntax). This data can be used to display the currently playing song when playing a internet radio stream.