# Floating Audio Player for entire forum

**URL:** https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078
**Category:** Development
**Created:** [August 14, 2023, 4:27pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078 "2023-08-14T16:27:19Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![lowkey\_324](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lowkey_324/32/320736_2.png) [@lowkey\_324](https://meta.discourse.org/u/lowkey_324)
#### Post date: [August 14, 2023, 4:27pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/1 "2023-08-14T16:27:19Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![supermathie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/supermathie/32/507518_2.png) [@supermathie](https://meta.discourse.org/u/supermathie)
#### Post date: [August 14, 2023, 7:14pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/2 "2023-08-14T19:14:27Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 14, 2023, 7:32pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/3 "2023-08-14T19:32:06Z")

</div>

there’s been similar topics and possible solutions suggested

> [@Use fancy audio player](https://meta.discourse.org/t/use-fancy-audio-player/108894/1):
>
> 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](http://podigee.github.io/podigee-podcast-player/) or [Podlove Web Player](https://docs.podlove.org/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](https://github.com/podigee/podigee-podcast-player#inline-configuration). window.playerConfig…

> [@Audio player (plugin?) request](https://meta.discourse.org/t/audio-player-plugin-request/54184):
>
> 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](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970):
>
> 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…

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [August 14, 2023, 7:41pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/4 "2023-08-14T19:41:28Z")

</div>

It can be done ;):

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/e/c/9ecad40652d83f9ee2397e78088240b37e68ec33.jpeg)

[https://github.com/captbaritone/webamp](https://github.com/captbaritone/webamp)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 14, 2023, 7:45pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/5 "2023-08-14T19:45:46Z")

</div>

nicely done Robert!

---

<div class="post-metadata">

### Author: ![lowkey\_324](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lowkey_324/32/320736_2.png) [@lowkey\_324](https://meta.discourse.org/u/lowkey_324)
#### Post date: [August 15, 2023, 2:14pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/6 "2023-08-15T14:14:01Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 15, 2023, 4:22pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/7 "2023-08-15T16:22:00Z")

</div>

this is cool too

> [@Media Overlay component](https://meta.discourse.org/t/media-overlay-component/81418):
>
> Continuing from [https://meta.discourse.org/t/media-overlay-plugin/60549](https://meta.discourse.org/t/media-overlay-plugin/60549)… [Discourse Media Overlay Theme](https://github.com/davidtaylorhq/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, …

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [August 15, 2023, 4:24pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/8 "2023-08-15T16:24:35Z")

</div>

Perhaps you could hire a freelancer to help you #Marketplace

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 16, 2023, 2:57am UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/9 "2023-08-16T02:57:19Z")

</div>

OOOOOOOO MMMMMMMM GGGGGGGGGG…

![Mtv No GIF by MELOTIKA](https://global.discourse-cdn.com/meta/original/4X/e/f/8/ef88e47b5240f8427930b9624b0037a72514088a.webp)

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 16, 2023, 5:02am UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/10 "2023-08-16T05:02:00Z")

</div>

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…

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

 ![Screenshot 2023-08-15 225832](https://global.discourse-cdn.com/meta/original/4X/8/b/2/8b2236d21a7356f91d0641f28a6180dcc2fb185c.jpeg)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 16, 2023, 6:26am UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/11 "2023-08-16T06:26:20Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 16, 2023, 12:07pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/12 "2023-08-16T12:07:46Z")

</div>

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. 🙂

[https://github.com/VaperinaDEV/soundcloud-music-player](https://github.com/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.

 ![Screenshot 2023-08-16 at 13.58.22](https://global.discourse-cdn.com/meta/original/4X/2/8/9/289a397f0b6628fa82d5ea0431d998d40ef81c1b.png)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 16, 2023, 3:11pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/13 "2023-08-16T15:11:37Z")

</div>

that’s super cool 😃 nice work 👏

---

<div class="post-metadata">

### Author: ![lowkey\_324](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lowkey_324/32/320736_2.png) [@lowkey\_324](https://meta.discourse.org/u/lowkey_324)
#### Post date: [August 16, 2023, 8:51pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/14 "2023-08-16T20:51:34Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 16, 2023, 10:57pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/15 "2023-08-16T22:57:58Z")

</div>

Amazing, @Don !!!

You are really fun to watch!

---

<div class="post-metadata">

### Author: ![lowkey\_324](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lowkey_324/32/320736_2.png) [@lowkey\_324](https://meta.discourse.org/u/lowkey_324)
#### Post date: [August 17, 2023, 9:18pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/16 "2023-08-17T21:18:29Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 17, 2023, 9:19pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/17 "2023-08-17T21:19:53Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 17, 2023, 10:11pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/18 "2023-08-17T22:11:19Z")

</div>

Hello, I’ve added a setting to add playlist. [DEV: Add playlist embed by VaperinaDEV · Pull Request #1 · VaperinaDEV/soundcloud-music-player · GitHub](https://github.com/VaperinaDEV/soundcloud-music-player/pull/1)

You can choose from two

- embed type
  - user
  - playlist

And add a User ID or Playlist ID depends what you selected from the list.

---

<div class="post-metadata">

### Author: ![lowkey\_324](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lowkey_324/32/320736_2.png) [@lowkey\_324](https://meta.discourse.org/u/lowkey_324)
#### Post date: [August 17, 2023, 11:27pm UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/19 "2023-08-17T23:27:40Z")

</div>

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

 ![Screenshot (1)](https://global.discourse-cdn.com/meta/original/4X/9/2/6/9268b8baf04f8cea106552e84e07dfcbd3ec1422.png)

 ![Screenshot (3)](https://global.discourse-cdn.com/meta/original/4X/e/b/2/eb2e599e8ff0208af00078f0d122c35b2fe9775d.png)

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 18, 2023, 3:35am UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/20 "2023-08-18T03:35:45Z")

</div>

Oh yes sorry, I fixed it. [FIX: playlists typo · VaperinaDEV/soundcloud-music-player@3f4ae4d · GitHub](https://github.com/VaperinaDEV/soundcloud-music-player/commit/3f4ae4d94175b6b86933ea1d870696b9e7b535f7)

[Next page](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078.md?page=2)
