firefrost-operations-manual/docs/tasks/ghost-music-player

Ghost CMS Music Player — Navbar Toggle

Status: READY
Priority: Tier 3 — Branding & Experience
Time: 1-2 hours
Created: March 15, 2026
Created By: The Navigator (Chronicler #30)

---

Overview

Add a toggleable music player to the firefrostgaming.com navbar. Epic orchestral/dark fantasy music plays when the visitor clicks the button. Autoplay is OFF by default — visitor chooses to enable it. Player is minimal and styled to match the Fire/Frost brand.

---

Selected Tracks

Track	Artist	Source	Duration	URL
Powerful	David Fesliyan	Fesliyanstudios.com	4:00	https://www.fesliyanstudios.com/royalty-free-music/download/powerful/539

Download link: https://www.fesliyanstudios.com/download-link.php?src=i&id=539

Additional tracks to add (Michael's picks — to be downloaded):

• Browse at: https://www.fesliyanstudios.com/royalty-free-music/downloads-c/epic-music/4
• Browse at: https://www.fesliyanstudios.com/royalty-free-music/downloads-c/fantasy-music/27

License: Free for commercial use. Donation encouraged. No attribution required on site.

---

Implementation Plan

Step 1 — Download & Host Tracks

• Download MP3(s) from Fesliyanstudios.com
• Upload to NextCloud at downloads.firefrostgaming.com
• Note the public URL for each file
• Example: https://downloads.firefrostgaming.com/music/powerful.mp3

Step 2 — Ghost Code Injection

Add to Ghost Admin → Settings → Code Injection → Site Header:

<!-- Firefrost Music Player -->
<style>
  #ff-music-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid rgba(255,107,53,0.4);
    border-radius: 20px;
    padding: 4px 12px;
    cursor: pointer;
    color: #F0F4F8;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    transition: all 0.3s ease;
  }
  #ff-music-btn:hover {
    border-color: #FF6B35;
    background: rgba(255,107,53,0.1);
  }
  #ff-music-btn.playing {
    border-color: #4A9EFF;
    background: rgba(74,158,255,0.1);
  }
  #ff-music-btn .ff-icon { font-size: 14px; }
  #ff-music-track { font-size: 10px; opacity: 0.7; max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
</style>

Add to Ghost Admin → Settings → Code Injection → Site Footer:

<script>
  (function() {
    const tracks = [
      { title: "Powerful", src: "https://downloads.firefrostgaming.com/music/powerful.mp3" },
      // Add more tracks here as: { title: "Track Name", src: "URL" }
    ];

    let current = 0;
    const audio = new Audio();
    audio.loop = false;
    audio.volume = 0.6;

    audio.addEventListener('ended', () => {
      current = (current + 1) % tracks.length;
      loadTrack(current);
      audio.play();
    });

    function loadTrack(index) {
      audio.src = tracks[index].src;
      const trackEl = document.getElementById('ff-music-track');
      if (trackEl) trackEl.textContent = tracks[index].title;
    }

    function createPlayer() {
      const nav = document.querySelector('.gh-head-actions') ||
                  document.querySelector('nav') ||
                  document.querySelector('.gh-head');
      if (!nav) return;

      const btn = document.createElement('button');
      btn.id = 'ff-music-btn';
      btn.innerHTML = '<span class="ff-icon">🔥</span><span id="ff-music-track">Music</span>';
      btn.setAttribute('aria-label', 'Toggle music');
      btn.title = 'Toggle background music';

      btn.addEventListener('click', () => {
        if (audio.paused) {
          if (!audio.src) loadTrack(current);
          audio.play();
          btn.classList.add('playing');
          btn.querySelector('.ff-icon').textContent = '❄️';
        } else {
          audio.pause();
          btn.classList.remove('playing');
          btn.querySelector('.ff-icon').textContent = '🔥';
        }
      });

      nav.appendChild(btn);
      loadTrack(current);
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', createPlayer);
    } else {
      createPlayer();
    }
  })();
</script>

Step 3 — Test

• Verify button appears in navbar
• Test play/pause toggle
• Test track cycling (if multiple tracks)
• Test on mobile
• Confirm no autoplay on page load

---

Adding More Tracks

Once additional tracks are downloaded and uploaded to NextCloud, add them to the tracks array in the footer injection:

const tracks = [
  { title: "Powerful", src: "https://downloads.firefrostgaming.com/music/powerful.mp3" },
  { title: "Second Track Name", src: "https://downloads.firefrostgaming.com/music/second-track.mp3" },
  { title: "Third Track Name", src: "https://downloads.firefrostgaming.com/music/third-track.mp3" },
];

Tracks cycle automatically when one ends. 🔥→❄️→🔥 icon toggles with play/pause state.

---

Success Criteria

• "Powerful" MP3 downloaded and uploaded to NextCloud
• Music button visible in Ghost navbar
• Play/pause toggles correctly
• Icon changes state (🔥 = stopped, ❄️ = playing)
• Track name shows in button
• No autoplay on page load
• Mobile-friendly
• Multiple tracks cycle when added

---

Fire + Frost + Foundation = Where Love Builds Legacy 💙🔥❄️