firefrost-operations-manual/docs/tasks/ghost-music-player/README.md

# 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:

```html
<!-- 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:

```html
<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:

```javascript
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** 💙🔥❄️