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
2 Likes
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
this component is wonderful, so nice. appreciate your work.
it makes the forum so joyful…
one suggestion,
now it is hardcoded in settings, only one list.
wonder if could enhance it to support multiple playlists,
could add a list of playlists in settings, {list id, list name}
then in the UI, give users the option to select a list, that will be very very nice 
e.g. add a dropdown in the slide panel, maybe on the top, allows to pick a playlist,
thanks a lot… and hope you consider this enhancement …
1 Like
Hello @fbpbdmin
I’ve merged an update for this. Now you can add more users / playlists to the player. It contains a new setting.
Here you can choose the embed type for each playlist. users or playlists
e.g.
More playlists…
4 Likes
hey @Don
this is so nice, really appreciate it !
2 Likes
hey @Don
for more fun,
seems could integrate spotify into this nice radio component as well
for example, a spotify playlist can be rendered/embedded as a similar player,
(need to add https://open.spotify.com/embed/ to the allowed iframes in settings first)
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/37i9dQZF1E37rs1nnrBO2K?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
this renders as
thanks again for this nice component and have a nice holiday !
1 Like
Don, this is a truly awesome theme component 
I wonder if it’s feasible to develop a comparable theme component to display videos, functioning as a video player. Such an addition would be immensely beneficial for hosting video tutorials, among other content, for forum users. Video sources could include platforms like YouTube, Vimeo, and similar resources.
yes, @Aizada_M thinking about the same path.
the songs in soundcloud are not as many as in other media sites, uploaded songs could be identified incorrectly for copyright issues.
embedding the players into an iframe, guess, it should work for most players, youtube, spotify etc…
and even some small web games, haha…
hope @Don has time on this thanks again !
1 Like
This topic was automatically closed after 298 days. New replies are no longer allowed.