# 整个论坛的浮动音频播放器

**URL:** <https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078>\
**Category:** Development\
**Created:** [2023年八月14日 16:27 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078 "2023-08-14T16:27:19Z")\
**Posts on this page:** 13\
**Page:** 2

<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:** [2023年八月21日 21:46 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/21 "2023-08-21T21:46:20Z")

</div>

谢谢！它完美运行。我需要一些关于 iPhone UI 的建议。当我用 iPhone 访问时，我注意到“播放器图标”超出了屏幕，用户无法关闭音乐播放器。您能否指导我找到修复此问题的代码行？

---

<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:** [2023年八月22日 06:06 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/22 "2023-08-22T06:06:58Z")

</div>

你好 👋

谢谢，我已经合并了一个修复程序并添加了对 iPhone（页脚导航）等的支持。: [UX: fix music player height and add iphone (footer-nav) support · VaperinaDEV/soundcloud-music-player@40509c7 · GitHub](https://github.com/VaperinaDEV/soundcloud-music-player/commit/40509c7d53471d8483bdc2cdde3d687badd744f9)

编辑：还修复了桌面视图的宽度和位置 [UX: fixe music player width and position on desktop · VaperinaDEV/soundcloud-music-player@56eb89b · GitHub](https://github.com/VaperinaDEV/soundcloud-music-player/commit/56eb89ba3aab3ab4278a6b22581cd4b01b8dc542)

编辑：更多更新 [UX: Add arrow to music player button by VaperinaDEV · Pull Request #2 · VaperinaDEV/soundcloud-music-player · GitHub](https://github.com/VaperinaDEV/soundcloud-music-player/pull/2)

![music-player](https://global.discourse-cdn.com/meta/original/4X/1/9/3/193b27836b5b6b5eadc330999d4b0bc363031002.gif)

---

<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:** [2023年十月3日 18:56 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/25 "2023-10-03T18:56:16Z")

</div>

> [@Floating Audio Player for entire forum](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078?u=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 appe…

为了继续改进此主题组件，是否有人可以帮助我进行UI改进。@Don是此组件的原始作者，他做得非常出色！

如果“收听”按钮能像下面一样显示为音乐播放器，并且用户仍然可以隐藏这个新的音乐播放器，那就太好了。 **请注意，这仅适用于桌面和平板电脑版本** 。除非您知道如何在移动版本上使其看起来仍然美观且不杂乱的方法

**音乐播放器示例**

1. 播放/暂停
2. 随机播放
3. 快进或快退
4. 歌曲名称和艺术家名称
5. 位于屏幕左侧
6. 隐藏音乐播放器的箭头

 ![IMG_0672](https://global.discourse-cdn.com/meta/original/4X/7/a/f/7af52551cf2c4790f64f88180eb00a3be16241b8.jpeg)

**当前版本**

---

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [2023年十月3日 19:27 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/26 "2023-10-03T19:27:45Z")

</div>

由于它是 SoundCloud 嵌入代码的包装器，因此使用您链接的主题组件所能做的事情将受到限制。这会将用户界面限制为类似以下内容（用于播放列表）：

https://w.soundcloud.com/player/?visual=false&url=https%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F1121520121&show_artwork=true

您所要求的一些功能可以使用现有的主题组件来实现，但无法更改实际的音乐播放器。要做到这一点，您需要一个能够向 SoundCloud API 发出请求的主题组件：[https://developers.soundcloud.com/docs/api/sdks。](https://developers.soundcloud.com/docs/api/sdks%E3%80%82)

---

<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:** [2023年十月3日 19:49 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/27 "2023-10-03T19:49:07Z")

</div>

> [@simon](#):
>
> 为此，您需要一个主题组件，该组件向 SoundCloud API 发出请求：[API - Wrappers - SoundCloud Developers](https://developers.soundcloud.com/docs/api/sdks)。

> **[API - Guide - SoundCloud Developers](https://developers.soundcloud.com/docs/api/guide#authentication)**

该 API 需要凭据，因此您可能不应该将其作为主题组件部署，因为它会将该信息暴露给浏览器——然后您最好将其制作成插件并在后端私下处理该连接。

---

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [2023年十月4日 00:03 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/28 "2023-10-04T00:03:22Z")

</div>

> [@merefield](#):
>
> 该API需要凭证

对于经过身份验证的请求，您需要一个插件，但SoundCloud API允许您通过仅提供`CLIENT_ID`来使用未经身份验证的请求完成许多操作。仅使用一个主题组件就可以创建一个SoundCloud播放器。网站所有者需要在SoundCloud上注册一个应用程序，并将其`CLIENT_ID`作为主题设置提供。

不过，一个SoundCloud插件会非常有趣。它可以做一些事情，比如允许用户将音轨上传到播放列表，直接从Discourse录制音轨等。

本质上，您需要身份验证才能发出`PUT`、`POST`和`DELETE`请求。您不需要身份验证即可发出`GET`请求。

编辑：这一切都会很棒，但他们并不容易注册应用程序：

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/3/c/63c6c1207a97383a41d4e87780ab1e56f73ca910.png)

通过一点谷歌搜索，似乎可以通过给他们发邮件来注册一个应用程序，但这对于需要网站所有者注册应用程序的主题组件或插件来说不够可靠。如果他们的API应用程序流程发生变化，我会回来处理。

---

<div class="post-metadata">

**Author:** ![fbpbdmin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fbpbdmin/32/300893_2.png) [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)\
**Post date:** [2023年十二月25日 19:44 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/29 "2023-12-25T19:44:23Z")

</div>

@Don

这个组件太棒了，非常漂亮。感谢你的工作。  
它让论坛充满了欢乐……

一个建议，  
现在它被硬编码在设置中，只有一个列表。  
不知道是否可以增强它以支持多个播放列表，

可以在设置中添加一个播放列表列表，{列表 ID，列表名称}  
然后在 UI 中，让用户可以选择一个列表，那将是非常非常好的 🙂  
例如，在滑动面板中添加一个下拉菜单，也许在顶部，允许选择一个播放列表，

非常感谢……希望你能考虑这个增强功能……

---

<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:** [2023年十二月26日 12:05 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/30 "2023-12-26T12:05:22Z")

</div>

你好 @fbpbdmin 👋

我已经为此合并了一个更新。现在您可以为播放器添加更多用户/播放列表。它包含一个新设置。  
在这里，您可以为每个播放列表选择嵌入类型。`users` 或 `playlists`

 ![Screenshot 2023-12-26 at 12.43.49](https://global.discourse-cdn.com/meta/original/4X/6/1/0/6103dab41876aea5e914fa7dad186ff6959456d2.png)

例如

 ![Screenshot 2023-12-26 at 12.49.10](https://global.discourse-cdn.com/meta/original/4X/6/c/1/6c15abd45e97442793fd9907a6772244e401ced4.png)

🔽

* * *

更多播放列表…

---

<div class="post-metadata">

**Author:** ![fbpbdmin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fbpbdmin/32/300893_2.png) [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)\
**Post date:** [2023年十二月26日 14:39 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/31 "2023-12-26T14:39:55Z")

</div>

嘿 @Don  
这太棒了，非常感谢！  
💯 👍 🍻

---

<div class="post-metadata">

**Author:** ![fbpbdmin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fbpbdmin/32/300893_2.png) [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)\
**Post date:** [2023年十二月30日 15:43 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/32 "2023-12-30T15:43:32Z")

</div>

嘿 @Don

为了更有趣 🙂  
似乎也可以将 Spotify 集成到这个漂亮的收音机组件中  
例如，Spotify 播放列表可以像类似的播放器一样被渲染/嵌入，  
（首先需要在设置中将 `https://open.spotify.com/embed/` 添加到允许的 iframe 中）

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

```

这会渲染成

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/f/9/1f9383fb6b5dcc7549db45dd455a62e73af8a156.jpeg)

再次感谢这个漂亮的组件，祝您节日快乐！

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2024年一月3日 11:29 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/33 "2024-01-03T11:29:26Z")

</div>

Don，这是一个非常棒的主题组件 🔥  
我想知道是否可以开发一个类似的主题组件来显示视频，作为一个视频播放器。这样的功能对于托管视频教程和其他内容将对论坛用户非常有益。视频源可以包括 YouTube、Vimeo 和类似平台。

---

<div class="post-metadata">

**Author:** ![fbpbdmin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fbpbdmin/32/300893_2.png) [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)\
**Post date:** [2024年一月4日 21:09 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/34 "2024-01-04T21:09:22Z")

</div>

> [@Aizada\_M](#):
>
> 主题组件用于显示视频，充当视频播放器。

是的，@Aizada_M 也在考虑同样的方法。

SoundCloud 上的歌曲数量不如其他媒体网站多，上传的歌曲可能会因版权问题而被错误识别。  
将播放器嵌入 iframe 中，我认为这应该适用于大多数播放器，如 YouTube、Spotify 等……  
甚至一些小型网页游戏，哈哈……

希望 @Don 有时间处理这个 🙂 再次感谢！

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [2024年六月8日 12:36 UTC](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/35 "2024-06-08T12:36:45Z")

</div>

此主题已在 298 天后自动关闭。不再允许回复。

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