+32

Sonos album art

Eric Stiens 3 years ago in Panels (dashboards) updated by jonathanrob 2 months ago 12

Just wanted to show off a proof of concept. I have my basic dashboard setup pulling the currently playing album art in the living room straight from Sonos. I use a raspberry pi running the Node-Sonos-HTTP-API to interact with Sonos from a variety of applications around the house. I have a little app running that pulls the album art URL from there and automatically redirects a request to show the album art and put that in a media tile. Works pretty well! Would be lovely if Sonos ever opened up their API to be able to do this without so many workarounds.


Can you explain how you did it? I'm looking for a workaround. I currently own a Sonos PLAY 5 and PLAY 3. Would appreciate your help.

Yes, can you please share this ?

Any update on if you can do this easier?

Update about this one. 

The new SONOS integration with Smartthings exposes the Album art as part of the API, meaning it would now be possible to achieve the above without having to have a server running on a Raspberry Pi: 

audioTrackData:

{
    "title": "Lavender",
    "artist": "Casiio",
    "album": "Lavender",
    "albumArtUrl": "https://i.scdn.co/image/8da7d21d33c18a33c91ff74a26c6adf481613179",
    "mediaSource": "Spotify"

Have you got any.instructions on how that could be achieved?

+2

There's nothing that I know of that natively shows album art. But the latest Sonos Smartthings integration exposes the album artwork as a URL so it wouldn't be too difficult for a new type of ActionTiles tile to look at this piece of data and display it (in the same way that the media tiles do right now). But currently this doesn't exist, so please vote for the first post and maybe the clever Devs will make it happen. 

what on earth is a magic egg?

I don’t know, but I sure hope it isn’t this:


+1

I really hope that this gets integrated for Sonos and for cast-web-api!

+1

Update: For cast-web-api you can get the album art for whatever device you are playing on (not sure if this would work with Sonos)

1. Go to your server address (IP:Port). For me it is 192.168.1.51:3000. The website will look somewhat like this: 

2. Then, type /device after the port. This is where things can get confusing:

Don't freak out because it's fairly simple to decode all this gibberish. Right now we're in the api!

3. Next, decide which device you want to use. I am going to use Jonathan's smart display as an example so I am going to have to grab the device ID. The ID is a random string of numbers and is pretty hard to identify.

Here is the ID for the device. This works with speaker groups as well. Group ID's look like this:

Ignore session ID's, if applicable to you. Next copy the id and paste it after the /device in the address bar. At this point the address should look something like this: http://192.168.1.51:3000/device/e6c69a41c29d859bbd7f6ccaecb44185.

4. Now the website has just contains info on your single device:

5. We're at the home stretch now! Now all you have to do is add /image to the address bar: http://192.168.1.51:3000/device/e6c69a41c29d859bbd7f6ccaecb44185/image.

If you get the blue cast logo above you did it correctly! This image will update whenever any media that can obtain a image is cast. This includes Spotify and YouTube. Now you just have to create a Media tile with this URL.

And there you go! It gets simpler and the find on page tool really helps! Instead of /image you could also use things like: /play or /pause to control the device! Here is what my panel looks like:

Here is what it looks like with Media playing:

(Some times the media details get a bit glitchy but it works.) Anyways, I hoped that this helped people figure this out! If you have questions please reply! and if this works similarly with Sonos please also share your findings!

+2

Great work on this Johnathan. 

Really frustrating that this functionality isn't available in Action tiles given all of the information is already accessible within the Smarthings device handler. 

I really don't think it'd be a huge amount of work to take the Albumart URL and display it on a tile.

This has bothered me for the week that I've had Smartthings! I saw the link to the media in the device details page on the IDE and it really annoyed me! I found out that it was within the api to support this after watching logs for the device handler. (trying to get next/previous track working but couldn't because there's no commands for it) I saw and http request that had /device/id/play and I decided to try /image and it just worked! It's really nice to have figured this out as I imagine there are other people who were just as frustrated as me!