Is it possible to set up an automatic spotify player iframe from spotify link?

support
1

My community is based around artists posting their music for others to hear.

When a user posts a soundcloud, the iframe works flawlessly. However it appears there is no auto-iframe for spotify tracks and playlists.

How should I go about setting this up if possible? I have all the embed codes from spotify but unsure how to set up in discourse.

Thank you!

2

Soundcloud oneboxes work great with Discourse. For Spotify, if you add a Spotify link to a song or playlist to a Discourse post, it creates a onebox, but not a Spotify player.

You can allow users to add the Spotify embed code (iframe) to Discourse posts by adding https://open.spotify.com/embed/ to your site’s allowed iframes site setting. This will create an audio player that lets users listen to 30 second snippets of tracks.

4 Likes
3

I will certainly look into making the iframe capability available to my users.

Is there any way to automatically convert regular Spotify links to the embedded iframe? I used invision power board for awhile and their software would create embeddables for a wide range of media services including spotify. However I understand their software is very expensive and not open source.

4

It is technically possible, but I’m not sure it’s something I’d want to rely on. As an example of how to do it, the Spotify link https://open.spotify.com/track/39zWYYZStDgWi32sOU9AX4?si=BLFB8HxuQNC-OaHtwD_E4A can be converted to an iframe by adding /embed to the link’s path and then using that URL as the iframe’s src:

<iframe src="https://open.spotify.com/embed/track/39zWYYZStDgWi32sOU9AX4?si=BLFB8HxuQNC-OaHtwD_E4A"></iframe>

2 Likes
5

Good thinking, yes that appears that it would do the trick. Do you know what files I would need to edit to get such results? If I knew the file(s) I am confident I could code it in myself!

6

If your Discourse site is self-hosted, I think the best approach would be to create a Spotify onebox plugin. If you open your web inspector on a Spotify page, you’ll see that the data you would need to create a Spotify player from an iframe exists in the page’s meta tags. You probably need to use key commands to open your web inspector. Spotify seems to block right clicks.

You can find examples of how oneboxes are created here: GitHub - discourse/onebox: A gem for turning URLs into website previews.

3 Likes