This is a proof-of-concept for integrating Spotify in a Custom Tile.
The Spotify Web API is limited in many ways compared to their apps. It will only show devices which are ‘active’ and controllable. Check out this post for more details.
This is one of several sample tiles that were built as part of the Custom Tiles release and is not intended to be a fully polished tile. Please feel free to learn from it, copy from it, or play with it.
If you’d like to give it a quick try, you can use my demo app for authorizing your Spotify account (can be revoked anytime), but please note that I am not actively maintaining the authorization app as it’s just for this demo purpose.
Setup
Go to https://spotify-demo-auth.glitch.me, and follow the instructions to authorize this demo app to access your Spotify account and take a note of the Refresh Token.
Tap the import button above to import the Spotify Custom Tile into your SharpTools account.
Tap Preview at the bottom of the editor and enter the Refresh Token from the first step.
Tap on the available devices button to select a device first then select the desired playlist to play.
Please note that this demo code uses Spotify Web APIs, and some of the player control APIs, such as play/pause, skip and prev, require the Spotify Premium account. See Spotify Web API Reference for more details.
Detailed Steps:
The source code and detailed steps for creating your own Spotify app and retrieving access token and refresh token can be found here, and please note that this is just a proof-of-concept/demo, and is not an official integration.
@James Pretty Cool! I followed the steps and have the custom tile on a dashboard. It pulls up my playlists and devices however, it won’t actually let me select a playlist or play anything. Any thoughts? Am I supposed to do something with the Access Token?
HI @Clayton_Rudney, did you select a device by clicking on the available device button first? This demo code doesn’t pre-select a device, so you will have to choose which device you want to it to play first.
@James Thanks for this reply. I was having the same issue. Per your suggestion, I was able to add devices through the Spotify app and can now see what’s playing. However, I can’t seem to interact with the controls (e.g. pause, skip, channel, device, etc.). I know that this is only a demo, but it’s really exciting to see this come to fruition.
@Jordan_Coffey, that’s interesting. If you can see the playlists and available devices in the tile, the Spotify token should have the access to control the play state as well. Does the playlist and available device buttons work for you?
Can you press F12 in the browser to open the developer tool to see if there’s any error when pressing the control buttons?
The available device button works (i.e., it shows the appropriate list of available devices and this list refreshed as I added devices) as does the playlist button (i.e., it shows playlists from my iTunes library as included in Spotify). In looking at the console, I am seeing the following errors as I click the controls:
I’m using Chrome. When I select one of my devices I get the following message:
Active Device: ?renderToken=XXXX Active Device:
Then it takes me back to my playlists.
Error: Request failed with status code 404 ?renderToken=XXX
at e.exports (isAxiosError.js:10)
at e.exports (isAxiosError.js:10)
at XMLHttpRequest.l.onreadystatechange (isAxiosError.js:10)
@James figured out part of the problem. I’m using Windows 10. I didn’t have the spotify app installed. Once I did, it allowed to play on my PC. However, it won’t let me select an amazon echo device and play there. It keeps defaulting back to my PC.
@Clayton_Rudney, thanks for the updates. I will have to test it against to the echo devices. I tested it for my desktop and phone, but didn’t have this issue. Almost seems like it doesn’t have access to the device (or the device is not found).
@Jordan_Coffey, I’d hesitated to guess it’s the same issue for your case that it is able to pull your playlist and available devices, but doesn’t have the control to the selected device for some reason. Can you try to install the Spotify app on your PC/Mac or on your mobile devices to give it a quick try?
Thanks @James. Uninstalled the app on my phone as well as logged out on my computer. Same issue. Playlists and devices update. Album art and track information updates. Just can’t seem to send commands to Spotify. Again, I know that this is a proof of concept so I appreciate your willingness to even respond. Just the concept of this functionality indicates so much progress and so many new opportunities!
@Clayton_Rudney & @Jordan_Coffey, the issue seems to be related to the Spotify API restriction that some Player APIs, such as play/resume, skip, prev, require the Spotify premium account, and some others, like getting available devices and playlists, don’t. I’ve added this note in the top post to help clarify this, and updated the source code to better inform users via the toast message when having issues sending Spotify requests.
Thanks for the kind words and yes this Custom Tile feature really enables a lot more interesting integration opportunities, and I cannot wait to see what the community will come up with.
I am experiencing the same issue. I’m able to control Spotify on my mobile and PC with this, but not my Echo devices. I do have a Spotify Premium account, so think this should work? If there’s any info I can provide to help, let me know.
Hi @James_Morrow welcome to the community. That’s weird. I’ve tested both my 1st gen Echo and Echo Dot, and I wasn’t able to reproduce this issue. Can you please verify if you are using the latest code by tapping the gear icon at the top-right corner in the code editor in Custom Tile editor, select “Update from Source”, then scroll down and press Save?
I’ve added some additional troubleshooting information and would like to see what error you receive when controlling your echo devices.
It would be a great help if you can PM me and send the screenshots/videos of the errors you see, errors in the browser’s Developer Tool’s console, and the steps how you reproduce it.
Here is a quick test using my 1st gen Echo and Echo Dot.
Sorry guys as I am very new to this but, I did find that if I used my Spotify App to connect to a device, Echo Show 5, and play music through it, I could then choose that Echo Show 5 in the custom tile. But if I tried to connect to a device that my native Spotify app has NOT connected too, it wouldn’t work.
I really hope that my help.
@dustin_davis, @James_Morrow I think I might have found the device selection bug and updated the code to include the user playback transfer when a device is selected. Can you guys update from the source code and give it a try?
@James@James_Morrow, I just updated from source code and everything seemed to work just fine. I did notice that some of my devices are not showing my device name instead I get this
@dustin_davis what devices are they? (Those showed device “id” instead of device name.)
When this issue occurs again, can you please follow the instructions below and send the results for further troubleshoot?
1.Go to https://spotify-demo-auth.glitch.me/ again
2.Tap Step 1: Authorize (You should not be asked to agree to authorize the demo app again because you already done that, but if it asks you again, clicks ok.)
3.Tap Step 2: Get Token
4. If the tokens are received correctly, you should see the optional test option below.
5. Click on Get Available Devices and copy the complete results
6. Send me the results from the previous step along with a screenshot of your Spotify demo tile.
Hi- Thanks for creating this, it looks great so far! I am having a few problems that I’m hoping you can help me with.
1- When I try to change tracks it says I need a spotify premium account, but I already have one.
2- Not all of my available devices show up, about 2 of the 20 that I have.
3- I’m trying to update your code and put in an access token, but those options dont exist within the custom tile editor
The Spotify Web API is limited in many ways compared to their apps. It will only show devices which are ‘active’ and controllable. Check out this post for more details.
This is one of several sample tiles that were built as part of the Custom Tiles release and is not intended to be a fully polished tile. Please feel free to learn from it, copy from it, or play with it.
to select a device first then select the desired playlist to play.
Please note that this demo code uses Spotify Web APIs, and some of the player control APIs, such as play/pause, skip and prev, require the Spotify Premium account. See Spotify Web API Reference for more details.
