How to Add Background Music Player to FluentCommunity Forum

Step 1: Go to Customization

• Log in to your FluentCommunity admin panel.
• Navigate to Forum Center Settings → Customization.

Step 2: Paste the code into Custom JavaScript

• Scroll down to the Custom Code section.
• In the Custom JavaScript box, paste the full background music code (with ON/OFF button, glowing effect, drag-to-close on mobile).

At the top of the script, you will see the copyright header like this:

<script>
/*!
 * BGM Button + Playlist – Custom Player for Valsvet Forum
 * Copyright (c) 2025 Le Van Am (Valsvet Vietnam)
 * Author: Le Van Am., MSc.  •  Email: [email protected]
 * Description: Music play/stop button with glow effects, drag-to-close on mobile,
 *              and auto playlist playback.
 * Note: Shared freely with the FluentCommunity. 
 *       Please keep this copyright header when using or modifying the code.
 */

Step 3: Replace with your own playlist

Inside the code, you will find this section:

  const PLAYLIST = [
    'https://example.com/song1.mp3', // Song 1
    'https://example.com/song2.mp3', // Song 2
    'https://example.com/song3.mp3', // Song 3
    'https://example.com/song4.mp3'  // Song 4
  ];

👉 Replace these links with direct .mp3 file URLs (uploaded to your server or hosting).
👉 You can add or remove as many tracks as you want — just separate them with commas.

Step 4: Save and test

• Click Save Custom CSS & JS.
• Go back to your forum at /forum and refresh the page.
• You should now see a Music button at the bottom-right corner.
• Click it to play or stop the background music.

📜 Script (copy & paste)

https://gist.github.com/vanamlevn-creator/d67ec518a5ba99d797ce2a170957ca5f