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
From your Shopify Admin, go to Online Store > Themes
Click Customize next to your active Plain Jane theme
In the Theme Editor, open the Theme Settings panel (paintbrush icon)
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
Last updated