OK, well there is likely a less-complicated way to do it, but here is how I got it done:
fetch("http://<yourIP>:52199/MCWS/v1/Playback/Info?Zone=-1")
.then((response) => response.text())
.then((text) => {
const parser = new DOMParser();
const xml = parser.parseFromString(text, "text/xml");
nextFileKey = xml.querySelector('Item[Name="NextFileKey"]').textContent;
return nextFileKey;
})
.then((nextFileKey) => {
return fetch(
`http://<yourIP>4:52199/MCWS/v1/File/GetInfo?Action=JSON&File=${nextFileKey}`
);
})
.then((response) => response.json())
.then((data) => {
const nextSongInfo = data[0];
nextSongName = nextSongInfo.Name;
nextSongArtist = nextSongInfo.Artist;
const nextSongThumbnail =
"http://<yourIP>:52199/MCWS/v1/File/GetImage?File=" +
nextFileKey +
"&FileType=Key&Type=Thumbnail&Format=jpg";
console.log(nextSongName, nextSongThumbnail);
const img = new Image();
img.src = nextSongThumbnail;
img.width = 150;
img.height = 150;
document.getElementById("nextSongThumbnail").appendChild(img);
document.getElementById("nextSongName").innerHTML = nextSongName;
document.getElementById("nextSongArtist").innerHTML = nextSongArtist;
});
I like having Display View showing the current track plus the next song...that's just my vibe.