Music Player Settings

Music Won't Autoplay

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