Global Music Player Guide

The global music player is a powerful feature that allows you to enjoy your AI-generated music anywhere in the application. It appears at the bottom of your screen when you play music, similar to popular platforms like Spotify and Apple Music.

Player Interface

Minimal Mode (Default View)

The player appears as a compact bar at the bottom of the screen with three main sections:

Left Section - Track Information

Album Cover: Displays the music artwork (or a default music icon if no image is available)
Track Name: Shows the current song title
Artist Name: Displays the artist (or "Unknown Artist" if not specified)

Center Section - Playback Controls

Previous Track Button (): Skip to the previous song in the playlist
- Only visible when you have multiple tracks in the playlist
Play/Pause Button (/): Main control to play or pause the current track
- Green color when playing
- Orange color when paused
Next Track Button (): Skip to the next song in the playlist
- Only visible when you have multiple tracks in the playlist
Progress Information: Shows current time / total duration (e.g., "1:23 / 3:45")

Right Section - Additional Controls

Play Mode Button: Toggle between playback modes
- Loop All (): Play all tracks in order repeatedly
- Repeat One (): Repeat the current track
- Shuffle (): Play tracks in random order
- Only visible when you have multiple tracks
Locate Button (): Find the current track in your music library
- Jumps to the page containing this track
- Only visible when you have multiple tracks
Playlist Button (): Open the playlist panel to view all tracks
Download Button (): Download the current track
- Requires appropriate subscription or credits
- Shows loading spinner while downloading
Expand/Collapse Button (/): Show or hide detailed information
Close Button (): Hide the player

Progress Bar

At the very top of the player, you'll find an interactive progress bar:

Hover Effect: The bar height increases slightly when you hover over it
Click to Seek: Click anywhere on the bar to jump to that position
Drag to Seek: Click and drag to scrub through the track
Visual Feedback:
- Green fill shows the played portion
- Orange pulsing indicator appears while seeking

Expanded Mode

Click the expand button () to access additional information:

Song Info: Complete track details including name and artist
Generated Prompt: The AI prompt used to create this music
Lyrics: Full lyrics if available

The expanded view shows up to 311px of scrollable content with a clean, organized layout.

Playlist Panel

Click the playlist button () to open the side panel:

Features

Track List: View all songs in the current playlist
Current Track Indicator:
- Green highlight on the currently playing track
- Green vertical bar on the left edge
- Play/Pause icon instead of track number
Quick Actions: Click any track to:
- If it's the current track: Pause/Resume playback
- If it's a different track: Start playing immediately
Track Information: Each item shows:
- Track number or play/pause icon
- Album artwork
- Song name and artist
- Duration

Playlist Controls

Track Count: Shows the total number of songs (e.g., "12 songs")
Empty State: Displays a helpful message when the playlist is empty

Playback Modes

Loop All (Default)

Plays all tracks in order
Returns to the first track after the last one finishes
Uses icon

Repeat One

Continuously repeats the current track
Uses icon

Shuffle

Plays tracks in random order
Uses icon

Download Feature

How to Download

Click the download button () on the player
The system will check your download eligibility
If eligible, the download will start automatically

Download Requirements

Free Users: Downloads are not available
Pro/Ultimate Users: Unlimited downloads
Credit-based: 2 credits per download (if using credits)

Download Formats

MP3: Available for all eligible users
WAV: Ultimate members only (higher quality)

Error Messages

"Download Requires Subscription": Upgrade to Pro or Ultimate
"Insufficient Credits": Register for signup credits or upgrade to Pro/Ultimate
"Authentication Required": Please log in first
"Music Not Found": The track is unavailable
"Generation Not Completed": Wait for the music to finish generating

Locate Feature

The locate feature () helps you find the current track in your music library:

Click the locate button
The app navigates to the music library page
Automatically jumps to the page containing the track
The track is highlighted for easy identification

This feature is only visible when playing from a playlist with multiple tracks.

Tips & Best Practices

Keyboard Shortcuts (if implemented)

Spacebar: Play/Pause
Arrow Left/Right: Seek backward/forward
Arrow Up/Down: Next/Previous track

Mobile Responsiveness

The player is fully responsive and adapts to different screen sizes:

On mobile: Compact layout with essential controls
On tablet: Standard layout with all features
On desktop: Full layout with expanded controls

Performance

The player uses optimized audio streaming
Minimal impact on page performance
Smooth animations and transitions

Troubleshooting

Player not showing:

Make sure you've started playing a track
Check if the player was manually closed (try playing again)

Audio not playing:

Check your device volume and mute settings
Verify the audio file is fully loaded
Try refreshing the page

Download failing:

Verify your subscription status
Check your credit balance
Ensure you're logged in
Contact support if issues persist

Advanced Features

Auto-Play Next

Automatically plays the next track when one finishes
Works in all playback modes (Loop, Repeat, Shuffle)
Seamless transitions between tracks

State Persistence

Player state is saved across page navigation
Your playlist remains intact when browsing
Resume playback where you left off

Multi-Source Playback

Plays music from the user dashboard
Supports admin music library
Maintains separate contexts for different sources