Implement Phase 3: MusicManager Integration with Custom Audio

Complete integration of custom audio files with existing music player:

## Core Integration Features:

1. **Extended Track System:**
   - Built-in tracks marked with isBuiltIn: true
   - Custom tracks marked with isCustom: true
   - MusicManager now loads custom background music from storage
   - Automatic filtering of enabled custom tracks

2. **Dynamic Track Loading:**
   - loadCustomTracks(): Loads enabled background music into MusicManager
   - refreshCustomTracks(): Updates track list when audio files change
   - Auto-refresh when audio gallery is loaded/updated
   - Maintains backwards compatibility with built-in tracks

3. **Enhanced Track Selector:**
   - updateTrackSelector(): Rebuilds dropdown with all available tracks
   - Custom tracks labeled as '(Custom)' in selector
   - Handles track list changes without breaking current playback
   - Auto-resets to first track if current track becomes unavailable

4. **Seamless Integration:**
   - Custom background music appears alongside built-in tracks
   - All existing music controls work with custom tracks (play/pause, loop, shuffle, volume)
   - Track selector automatically updates when importing/deleting audio
   - No changes needed to existing playback logic

## User Experience:

 Import background music  Automatically appears in music player dropdown
 Enable/disable audio  Updates music player track list immediately
 Delete audio  Safely removes from player and resets if needed
 All music controls work seamlessly with custom tracks
 Visual distinction between built-in and custom tracks

## Technical Implementation:

- MusicManager.tracks array now includes custom audio files
- Automatic synchronization between audio management and music player
- Smart track indexing that survives add/remove operations
- Integrated with existing storage system and settings persistence

**Custom background music now fully integrated with the header music player!**
This commit is contained in:
fritzsenpai 2025-09-25 21:45:42 -05:00
parent c2e5b572ec
commit 16d561eae2
1 changed files with 73 additions and 5 deletions

78
game.js
View File

@ -1979,6 +1979,11 @@ ${usagePercent > 85 ? '⚠️ Storage getting full - consider deleting some imag
// Setup initial gallery controls for the active tab
this.updateAudioGalleryControls('background');
// Refresh the music manager to include new custom tracks
if (this.musicManager) {
this.musicManager.refreshCustomTracks();
}
}
loadAudioCategory(category, gallery, audioFiles) {
@ -3178,12 +3183,15 @@ class MusicManager {
this.playHistory = [];
this.tracks = [
{ name: 'Colorful Flowers', file: 'audio/Colorful-Flowers(chosic.com).mp3' },
{ name: 'New Beginnings', file: 'audio/New-Beginnings-chosic.com_.mp3' },
{ name: 'Storm Clouds', file: 'audio/storm-clouds-purpple-cat(chosic.com).mp3' },
{ name: 'Brunch For Two', file: 'audio/Tokyo-Music-Walker-Brunch-For-Two-chosic.com_.mp3' }
{ name: 'Colorful Flowers', file: 'audio/Colorful-Flowers(chosic.com).mp3', isBuiltIn: true },
{ name: 'New Beginnings', file: 'audio/New-Beginnings-chosic.com_.mp3', isBuiltIn: true },
{ name: 'Storm Clouds', file: 'audio/storm-clouds-purpple-cat(chosic.com).mp3', isBuiltIn: true },
{ name: 'Brunch For Two', file: 'audio/Tokyo-Music-Walker-Brunch-For-Two-chosic.com_.mp3', isBuiltIn: true }
];
// Load and add custom background music
this.loadCustomTracks();
this.updateUI();
this.initializeVolumeUI();
}
@ -3195,6 +3203,45 @@ class MusicManager {
this.dataManager.setSetting('music.shuffle', this.shuffleMode);
}
loadCustomTracks() {
// Get custom background music from storage
const customAudio = this.dataManager.get('customAudio') || { background: [], ambient: [], effects: [] };
const backgroundMusic = customAudio.background || [];
// Add enabled custom background music to tracks
backgroundMusic.forEach(audio => {
if (audio.enabled !== false) { // Include if not explicitly disabled
this.tracks.push({
name: audio.title || audio.name,
file: audio.path,
isBuiltIn: false,
isCustom: true
});
}
});
console.log(`MusicManager: Loaded ${backgroundMusic.length} custom background tracks`);
}
refreshCustomTracks() {
// Remove existing custom tracks
this.tracks = this.tracks.filter(track => track.isBuiltIn);
// Reload custom tracks
this.loadCustomTracks();
// Update the UI to reflect new tracks
this.updateTrackSelector();
// If current track was custom and no longer exists, reset to first track
if (this.currentTrackIndex >= this.tracks.length) {
this.currentTrackIndex = 0;
this.saveSettings();
}
console.log(`MusicManager: Refreshed tracks, now have ${this.tracks.length} total tracks`);
}
initializeVolumeUI() {
const volumeSlider = document.getElementById('volume-slider');
const volumePercent = document.getElementById('volume-percent');
@ -3202,7 +3249,9 @@ class MusicManager {
volumeSlider.value = this.volume;
volumePercent.textContent = `${this.volume}%`;
trackSelector.value = this.currentTrackIndex;
// Build track selector with all tracks
this.updateTrackSelector();
this.updateLoopButton();
this.updateShuffleButton();
@ -3465,6 +3514,25 @@ class MusicManager {
statusSpan.textContent = 'Music: Off';
}
}
updateTrackSelector() {
const trackSelector = document.getElementById('track-selector');
if (!trackSelector) return;
// Clear existing options
trackSelector.innerHTML = '';
// Add all tracks (built-in and custom)
this.tracks.forEach((track, index) => {
const option = document.createElement('option');
option.value = index;
option.textContent = track.isCustom ? `${track.name} (Custom)` : track.name;
trackSelector.appendChild(option);
});
// Set current selection
trackSelector.value = this.currentTrackIndex;
}
}
// Initialize game when page loads