this is cool too
1 Like
OOOOOOOO MMMMMMMM GGGGGGGGGG…
The Media Overlay Component will provide a button at the corner of every iframe.
This way you can pop out any iframe into a separate little window, and keep it on top while browsing through the forum, until the user closes it.
Enable that Theme Component, and whitelist your iframe source (i.e. https://w.soundcloud.com and https://api.soundcloud.com) in your site settings under allowed iframes.
Then you can paste this snippet into a Topic Post…
<iframe src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/129053679&color=ff5500&auto_play=false&hide_related=false&show_comments=false&show_user=true&show_reposts=false" height=100%></iframe>
Click that button and that mini player pops up in the bottom right corner and stays open while you browse around the site (until you manually close it)…
3 Likes
hah. i was going to try this but you beat me to it. well done! 
2 Likes
Hello 
I’ve made a simple theme component what fit your needs and you can use or it can be a good sample to customize it more. 
I added some settings.This component uses the SoundCloud embed. You need to add your SoundCloud User ID and it will fetch your songs.
10 Likes
that’s super cool nice work
5 Likes
This is EXACTLY what I was looking for. You are amazingggg! I will test it out this week. I hope you don’t mind me reaching out if I need some help though.
5 Likes
Hi @Don,
Any chance I can chat with you. I tried to find your profile, but couldn’t. I wanted to get some help on making thise theme component fetch playlist ids instead of user ids or at least have an embedded playlist (by inputting embed code or the playlist url) appear when you click on the “player” icon . Is this a possibility?
hi @lowkey_324 it is best to post your inquiry here in case others can help and so others can also learn the solutions. 
1 Like
Hello, I’ve added a setting to add playlist. DEV: Add playlist embed by VaperinaDEV · Pull Request #1 · VaperinaDEV/soundcloud-music-player · GitHub
You can choose from two
- embed type
- user
- playlist
And add a User ID or Playlist ID depends what you selected from the list.
1 Like
LETSGOOOOOOO! you are honestly an ANGEL!
The only thing is after I add it as a component of the Default theme, I receive this message as it can’t fetch the URL for my public playlist. What am I doing wrong? I tried only inputting the playlist id and I tried inputting both playlist id and user id when I select playlist for embed type
1 Like
Oh yes sorry, I fixed it. FIX: playlists typo · VaperinaDEV/soundcloud-music-player@3f4ae4d · GitHub
2 Likes
Thank you! It works perfectly. One thing I’d need some advice on is the UI for iPhone. When I access with an iPhone, I noticed that the “Player icon” goes out of screen and the user cannot close the music player. Would you mind directing me to the line of code to fix this.
1 Like
Hello
Thanks, I’ve merged a fix and add support for iphone (footer-nav) etc…: UX: fix music player height and add iphone (footer-nav) support · VaperinaDEV/soundcloud-music-player@40509c7 · GitHub
Edit: also fixes the width and position on desktop view UX: fixe music player width and position on desktop · VaperinaDEV/soundcloud-music-player@56eb89b · GitHub
Edit: more update UX: Add arrow to music player button by VaperinaDEV · Pull Request #2 · VaperinaDEV/soundcloud-music-player · GitHub
1 Like
In continuing improving this theme component, any chance someone can help me with a UI improvement. @Don is the original author of this component and did a fantastic job!
It would be great if the Listen button appeared as a Music player like below and users could still hide this new music player. Note this would only be for desktop and tablet version. Unless, you know a way to make it still look good and not cluttered on mobile version
Music player example
- Play/ pause
- Shuffle
- Skip forward or backward
- Song name and artist name
- Positioned in the left of the screen
- Arrow to hide the music player
Current version
What can be done with the theme component that you linked to will be limited because it’s a wrapper around the SoundCloud embed code. That limits the UI to something like this (for a playlist):
Some of what you’re asking for could be done with the existing theme component, but it’s not going to be possible to make changes to the actual music player. To do that, you’d need a theme component that made requests to the SoundCloud API: API - Wrappers - SoundCloud Developers.
2 Likes
https://developers.soundcloud.com/docs/api/guide#authentication
That API requires credentials, so you probably shouldn’t be deploying that as a Theme Component as it would expose that information to the browser - you would then be best to make it a plugin and deal with that connection privately in the back end.
3 Likes
For authenticated requests you’d need a plugin, but the SoundCloud API lets you do a lot with unauthenticated requests by just supplying a CLIENT_ID. A SoundCloud player could be made with just a theme component. The site owner would need to register an app on SoundCloud and supply their CLIENT_ID as a theme setting.
A SoundCloud plugin would be really interesting though. It could do things like allow users to upload tracks to a playlist, record tracks directly from Discourse, etc.
Essentially, you need authentication to make PUT, POST and DELETE requests. You don’t need authentication to make GET requests.
Edit: this would all be great, but they don’t make it easy to register an app:
From Googling around a bit, it seems that it’s possible to register an app by emailing them, but that’s not reliable enough for a theme component or plugin that would require the site owner to register an app. If things change with their API application process I’ll get back to this.
2 Likes