Penmonicus wrote:
I've been trying to work through with the Player developer and Spacial support but it seems like the Player developer seems to think the metadata is stored in a separate file, and Spacial support says that the link I've pasted above should carry the Now Playing info with it.
HTML5 Audio doesn't have any means to interpret metadata sent along a file and doesn't provide any direct access to the raw data of the audio stream.
There are ways to read the metadata of a local file (by grabbing the local file via JavaScript and passing the raw data through to the audio element instead of trying to grab the metadata from the audio element), but those won't work for streaming audio.
Almost all Streaming Audio Players in JavaScript get around that limitation by accessing the exposed stats APIs of typical streaming servers (i.e.: 7.html for Shoutcast v1 or /stats for Shoutcast v2) and reading the Metadata independently from the Audio source. (you could even access the metadata page of one stream while listening to a completely different one)
For SAM Cloud you will need to write your own MetaData parser similar to this minimalistic one:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SAMCloud Parser - Demo</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function updateFromMediaItem(metadataObj) {
if (metadataObj && metadataObj.m_Item2) {
var titleTag = document.getElementById('titleTagDisplay');
titleTag.innerHTML = metadataObj.m_Item2.Artist + ' - ' + metadataObj.m_Item2.Title;
}
}
</script>
<script type="text/javascript">
// CONFIGURE HERE
var stationID = 42879;
var apiToken = '2ee74261ab6012de69ee5a94662a9bb6ead9066f';
// refresh MetaData every 5 seconds
function fetchMetadata(stationID, apiToken) {
var url = 'http://listen.samcloud.com/webapi/station/'+stationID+'/history/npe?token='+apiToken+'&format=json&callback=updateFromMediaItem';
$.ajax({
url,
cache: false,
datatype: 'jsonp',
type: 'GET',
timeout: 10000
});
}
fetchMetadata(stationID, apiToken);
window.setInterval(function() {
fetchMetadata(stationID, apiToken);
}, 5000);
</script>
</head>
<body>
<h1 id="titleTagDisplay">We haven't fetched any metadata yet.</h1>
</body>
</html>
In theory there is a way to get your own token, but I've misplaced the API documentation from the SAM Vibe era where this was explained.
For now you can just use whatever token the "Free Player Site" in your SAM Cloud account under widgets uses:
Open the site from SAM Cloud and view the source (rightclick->view source somewhere on the page).
Then look for a hidden input field with the id Token (<input type="hidden" value="2ee74261ab6012de69ee5a94662a9bb6ead9066f" id="Token" />)
Copy the value and replace the demo value of the apiToken variable in my script above.
The Station ID is the number in almost all samcloud URLs for your station. (i.e. the widgets page URL looks like this:
https://samcloud.spacial.com/Station/Ma ... idgets-tab - Here 42879 is my Station ID)
Note: The above code won't work as I deliberately modified the apiToken so you can't use it to communicate with my station.
The demo page will just have an h1 element with the Artist - Title string.
From there on you'll have to do the work yourself. Your Player script demo pages only show the minified code. Unless you get the full sourcecode it's hard to modify the obfuscated code.