Floating Audio Player for entire forum

[lowkey_324]

Hi, I’ve read through the forum trying to figure out if its possible to have an audio player for one’s entire discourse website. I’m not trying to do anything fancy like auto play.

What I’d like to do is have a music player floating on the website. So regardless of which topic or pages a user visits, they can decide to just click play and listen to music as they read through posts (so yes there should be the basic music player controls). The name of the song and the artists name would also appear. The music will be from Soundcloud playlists that I’ve made from my own account.

It’d also be great if there was a way to allow users to hide this music player.

Any chance you have any articles, plugins, third party services or instructions you can point me to in order to achieve this?

[supermathie (Michael Brown)]

I have no idea if it’s possible, but this would be pretty cool in the sidebar as an additional section!

[Lilly]

there’s been similar topics and possible solutions suggested

Use fancy audio player

Hi, I’m planning to launch an audio community and was looking at audio player options in Discourse. There don’t seem to be any out-of-the-box solutions. Would it be possible to integrate a player like the Podigee Podcast Player or Podlove Web Player so that any link to an audio file in a post would appear in that player? I don’t know anything about Discourse coding, but from Podigee’s Github it seems like all that would be needed is to wrap an audio file URL in some code. window.playerConfig…

Audio player (plugin?) request

This one is a stretch, but I thought I’d see if any of you guys would be up for a challenge. A couple of us have recently started up a Discourse forum (so far, so good btw) related to music recording, mixing, etc. In the site, we have a section where people can post a mix that they are working on so that others can contribute ideas for fixes (ie, adjust EQ on vocals, ext). I’m curious if it would be possible to make an audio player that allows you to hear the 10 most recent uploads (for examp…

Embed HTML5 player for MP3 file

I was hoping to just paste the below into a discourse topic and get an HTML5 mp3 player. (This embedded source comes from a plugin on my Wordpress site.) Pointers, thoughts, … ?? <script type='text/javascript'> <!--//--><![CDATA[//><!-- /*! This file is auto-generated */ !function(d,l){"use strict";var e=!1,o=!1;if(l.querySelector)if(d.addEventListener)e=!0;if(d.wp=d.wp||{},!d.wp.receiveEmbedMessage)if(d.wp.receiveEmbedMessage=function(e){var t=e.data;if(t)if(t.secret||t.message||t.value)i…

[merefield (Robert)]

It can be done ;):

GitHub - captbaritone/webamp: Winamp 2 reimplemented for the browser

[Lilly]

nicely done Robert!

[lowkey_324]

Thanks for this! I have very minimal coding experience so after looking through the documentation I’m not sure I understand how to connect a SoundCloud playlist with this audio player. Any chance you have some insight?

[Lilly]

this is cool too

Media Overlay component

Continuing from https://meta.discourse.org/t/media-overlay-plugin/60549… Discourse Media Overlay Theme This theme component allows users to “pop out” media into a floating window while they browse the site. They can even navigate to a different topic and the media will continue working. It works with any <iframe> or <video> (with some special treatment for lazyYT). It adds a button to every compatible thing, which then opens a little popup in the bottom right. You can then “minimise” it, …

[merefield (Robert)]

Perhaps you could hire a freelancer to help you marketplace

[denvergeeks]

OOOOOOOO MMMMMMMM GGGGGGGGGG…

[denvergeeks]

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)…

[Lilly]

hah. i was going to try this but you beat me to it. well done!

[Don]

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.

GitHub - VaperinaDEV/soundcloud-music-player

I added some settings.This component uses the SoundCloud embed. You need to add your SoundCloud User ID and it will fetch your songs.

[Lilly]

that’s super cool nice work

[lowkey_324]

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.

[denvergeeks]

Amazing, @Don !!!

You are really fun to watch!

[lowkey_324]

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?

[Lilly]

hi @lowkey_324 it is best to post your inquiry here in case others can help and so others can also learn the solutions.

[Don]

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.

[lowkey_324]

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

[Don]

Oh yes sorry, I fixed it. FIX: playlists typo · VaperinaDEV/soundcloud-music-player@3f4ae4d · GitHub