Embedding Spotify player

#1

Spotify allows users to generate HTML for embedding players in web pages (select Share > Embed track, etc.). While this works fine in e.g. a bare-bones HTML page, the rendering of the players is not correct in TiddlyWiki. It turns out that the problem can be solved by adding border:none to the style attribute of the iframe, as illustrated in the screenshot.

Spotify embedded player
Spotify embedded player1408×1040 133 KB

The player at the top uses the code generated by Spotify:

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/4ftJEhQYwzs7T61qNdyQw9?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

while the player at the bottom adds border:none to the generated style attribute:

<iframe style="border:none;border-radius:12px" src="https://open.spotify.com/embed/track/4ftJEhQYwzs7T61qNdyQw9?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
6 Likes
#2

Yeah!.. but is there a trick to let it play more than 30 secs for free?

#3

A premium account is required and you must be logged in (at https://open.spotify.com).

#4

I’m logged in and it still only plays the preview, even with a premium account.

#5

Are you logged into spotify in the current browser?

Although personaly I have an independant spotify running on my phone and desktop, I can see someone may want to share a good track they will need to resolve this issue to use it.

#6

Hello Emily_Eden, welcome!
You need to be logged into Spotify in the browser where you want to play the embedded track(s) or playlist(s), as mentioned above: https://open.spotify.com. The tab doesn’t need to be open. Being logged into the app does nothing. I embed Spotify music (and also SoundCloud,…) in my single file TiddlyWiki music player (What's the most complex filter expression you've ever tried? - #9 by Jan) of which I am the only user. I have not tested other scenarios.
Hope this helps.

#7

I am logged in on the browser. I’m not sure why you assume I would only be logged in on the app. It doesn’t work and hasn’t worked for me.

#8

It does work the way I described. It appears that something is not quite right on your end. Could you provide some details? What environment are you using: single file wiki, Node.js, other…? Could you also post the contents of the embed that does not work, or, alternatively, export the containing tiddler as JSON and upload the JSON file?