Floating Audio Player for entire forum

this is cool too

1 Like

Perhaps you could hire a freelancer to help you marketplace

2 Likes

OOOOOOOO MMMMMMMM GGGGGGGGGG…

Mtv No GIF by MELOTIKA

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! :smiley: :clap:

2 Likes

Hello :wave:

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. :slightly_smiling_face:

I added some settings.This component uses the SoundCloud embed. You need to add your SoundCloud User ID and it will fetch your songs.
Screenshot 2023-08-16 at 13.58.22

10 Likes

that’s super cool :smiley: nice work :clap:

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

Amazing, @Don !!!

You are really fun to watch!

3 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 :wave: it is best to post your inquiry here in case others can help and so others can also learn the solutions. :slight_smile:

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 :wave:

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

music-player

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

  1. Play/ pause
  2. Shuffle
  3. Skip forward or backward
  4. Song name and artist name
  5. Positioned in the left of the screen
  6. 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