# Music Player Settings

> **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

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/readme-1/theme-settings/music-player-settings.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.