Music Player Settings

For Plain Jane, and Plain Jane Interactive

What You'll Learn

• How to enable and customize the built-in music player

• How to upload and configure your own audio files

• Advanced options including disk art, mobile display, and countdown integration

• Styling and positioning options for different devices

---

📂 Access Music Player Settings

1. From your Shopify Admin, go to Online Store > Themes

2. Click Customize next to your active Plain Jane theme

3. In the Theme Editor, open the Theme Settings panel (paintbrush icon)

4. Select Music Player from the menu

---

🎧 Basic Configuration

Enable Music Player

• Show Music Player: Toggle to enable the music player on desktop

• Show Music Player on Mobile: Optional mobile display control

• Countdown Music: Integration with password page countdown features

Audio File Setup

• Music URL: Upload your audio file (MP3, WAV, or OGG formats supported)

• Audio Preload: Automatically preloads metadata for faster playback

• Autoplay: Music starts playing when page loads (subject to browser policies)

💡 Note: Modern browsers often block autoplay with sound until user interaction occurs.

---

🎨 Visual Customization

Disk Image Display

• Show Disk: Toggle to display a rotating disk/vinyl record aesthetic

• Disk Cover Image: Upload custom album artwork (recommended: 200x200px minimum)

• Disk Rotation: Animated spinning effect when music is playing

Player Controls

• Music Player Button Color: Customize play/pause button color

• Play Button: Large, accessible play control

• Progress Bar: Visual indicator of playback progress

• Navigation Controls: Play/pause functionality

---

📱 Mobile Optimization

Mobile Display Options

• Show Music Player on Mobile: Control mobile visibility separately

• Mobile Play Alignment: Automatic alignment adjustment when disk is hidden

• Responsive Design: Player adapts to different screen sizes

Mobile-Specific Features

• Touch-Friendly Controls: Optimized button sizes for mobile

• Bandwidth Consideration: Option to disable on mobile to save data

• Performance Optimization: Lighter mobile experience

---

🎵 Advanced Features

Song Information Display

• Current Track Name: Displays in song bar

• Track Title: Customizable track information

• Progress Tracking: Real-time playback progress

Integration Options

• Password Page Integration: Music can play during countdown timers

• Theme Synchronization: Coordinates with overall theme animations

• Cross-Page Continuity: Music continues as users navigate (if configured)

---

⚙️ Technical Configuration

Audio Settings

• Preload Metadata: Faster initial load times

• Audio Element: HTML5 audio with fallback support

• File Format Support: MP3 (recommended), WAV, OGG

• Browser Compatibility: Works across all modern browsers

Performance Considerations

• File Size: Keep audio files under 5MB for optimal performance

• Loading Strategy: Metadata preload for balance of speed and functionality

• Mobile Data: Consider mobile users' data usage

---

🎯 Best Practices

Audio File Preparation

• Format: Use MP3 for best compatibility and file size balance

• Quality: 128-256 kbps provides good quality with reasonable file size

• Length: Consider shorter loops or ambient tracks for background music

• Volume: Normalize audio levels to prevent jarring volume changes

User Experience

• Subtle Implementation: Background music should enhance, not distract

• User Control: Always provide clear play/pause controls

• Mobile Consideration: Test on mobile devices with limited bandwidth

• Accessibility: Ensure controls are keyboard accessible

---

🔧 Troubleshooting

Common Issues

Music Won't Autoplay

• Modern browsers require user interaction before playing audio

Mobile Performance

• Large audio files can impact mobile performance

• Consider disabling on mobile for data-sensitive users

• Test on actual mobile devices, not just browser dev tools

File Loading Issues

• Ensure audio file URL is accessible

• Check file format compatibility

• Verify file size isn't too large

Browser Support

• Chrome/Edge: Full support for all features

• Safari: May have stricter autoplay policies

• Firefox: Good support with standard configurations

• Mobile Browsers: Varies by device and browser

---