Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/soundstudiopro.com/public_html/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<?php
// Modern Music Player - Clean, Professional Design
// Replaces the old "global" player with a fresh approach

// Prevent multiple includes
if (defined('MUSIC_PLAYER_INCLUDED')) {
    return;
}
define('MUSIC_PLAYER_INCLUDED', true);
?>

<!-- Modern Music Player -->
<div id="musicPlayer" class="music-player">
    <!-- Player Header -->
    <div class="player-header">
        <div class="player-info">
            <div class="track-info">
                <div class="track-title" id="playerTrackTitle">No track playing</div>
                <div class="track-artist" id="playerTrackArtist">Select a track to start</div>
            </div>
        </div>
        
        <div class="player-controls">
            <button class="control-btn minimize-btn" id="minimizeBtn" title="Minimize">
                <i class="fas fa-chevron-down"></i>
            </button>
        </div>
    </div>
    
    <!-- Player Content -->
    <div class="player-content">
        <!-- Main Controls -->
        <div class="main-controls">
            <button class="control-btn previous-btn" id="prevBtn" title="Previous">
                <i class="fas fa-step-backward"></i>
            </button>
            
            <button class="control-btn play-btn" id="playBtn" title="Play">
                <i class="fas fa-play" id="playIcon"></i>
            </button>
            
            <button class="control-btn next-btn" id="nextBtn" title="Next">
                <i class="fas fa-step-forward"></i>
            </button>
        </div>
        
        <!-- Progress Section -->
        <div class="progress-section">
            <div class="time-display">
                <span class="current-time" id="currentTime">0:00</span>
                <span class="duration" id="duration">0:00</span>
            </div>
            
            <div class="progress-container" id="progressContainer">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                    <div class="progress-handle" id="progressHandle"></div>
                </div>
            </div>
        </div>
        
        <!-- Volume Control -->
        <div class="volume-section">
            <button class="control-btn volume-btn" id="volumeBtn" title="Mute">
                <i class="fas fa-volume-up" id="volumeIcon"></i>
            </button>
            
            <div class="volume-slider-container" id="volumeSliderContainer">
                <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="70">
            </div>
        </div>
    </div>
    
    <!-- Hidden Audio Element -->
    <audio id="audioElement" preload="none"></audio>
</div>

<style>
/* Modern Music Player Styles */
.music-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.98) 0%, rgba(30, 30, 30, 0.98) 100%);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    height: 80px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.music-player.minimized {
    height: 60px;
}

.music-player.hidden {
    transform: translateY(100%);
}

/* Player Header */
.player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 50px;
}

.player-info {
    flex: 1;
    min-width: 0;
}

.track-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.track-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.track-artist {
    font-size: 0.8rem;
    color: #a0aec0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Player Content */
.player-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.5rem;
    flex: 1;
    gap: 2rem;
}

/* Main Controls */
.main-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.control-btn {
    background: none;
    border: none;
    color: #a0aec0;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.8rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: scale(1.1);
}

.control-btn.play-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    min-width: 50px;
    min-height: 50px;
    font-size: 1.2rem;
}

.control-btn.play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.control-btn.playing {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* Progress Section */
.progress-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 500px;
}

.time-display {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #a0aec0;
}

.progress-container {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
}

.progress-bar {
    position: relative;
    height: 100%;
    width: 100%;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s ease;
}

.progress-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.progress-container:hover .progress-handle {
    opacity: 1;
}

/* Volume Section */
.volume-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 150px;
}

.volume-slider-container {
    position: relative;
    width: 80px;
}

.volume-slider {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .music-player {
        height: 70px;
    }
    
    .player-content {
        padding: 0.5rem 1rem;
        gap: 1rem;
    }
    
    .track-title,
    .track-artist {
        max-width: 200px;
    }
    
    .volume-section {
        min-width: 100px;
    }
    
    .volume-slider {
        width: 60px;
    }
}

@media (max-width: 480px) {
    .player-content {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
    }
    
    .progress-section {
        order: 2;
        max-width: none;
    }
    
    .main-controls {
        order: 1;
    }
    
    .volume-section {
        order: 3;
        min-width: auto;
    }
    
    .track-title,
    .track-artist {
        max-width: 150px;
    }
}

/* Animation for playing state */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.control-btn.playing {
    animation: pulse 2s infinite;
}
</style>

<script>
// Modern Music Player JavaScript
class MusicPlayer {
    constructor() {
        this.audio = document.getElementById('audioElement');
        this.player = document.getElementById('musicPlayer');
        this.playBtn = document.getElementById('playBtn');
        this.playIcon = document.getElementById('playIcon');
        this.prevBtn = document.getElementById('prevBtn');
        this.nextBtn = document.getElementById('nextBtn');
        this.volumeBtn = document.getElementById('volumeBtn');
        this.volumeIcon = document.getElementById('volumeIcon');
        this.volumeSlider = document.getElementById('volumeSlider');
        this.minimizeBtn = document.getElementById('minimizeBtn');
        this.progressContainer = document.getElementById('progressContainer');
        this.progressFill = document.getElementById('progressFill');
        this.progressHandle = document.getElementById('progressHandle');
        this.currentTimeDisplay = document.getElementById('currentTime');
        this.durationDisplay = document.getElementById('duration');
        this.trackTitle = document.getElementById('playerTrackTitle');
        this.trackArtist = document.getElementById('playerTrackArtist');
        
        this.isPlaying = false;
        this.currentTrack = null;
        this.playlist = [];
        this.currentIndex = 0;
        this.volume = 0.7;
        this.isMinimized = false;
        
        this.initializeEventListeners();
        this.setupAudio();
    }
    
    initializeEventListeners() {
        // Play/Pause
        this.playBtn.addEventListener('click', () => this.togglePlay());
        
        // Previous/Next
        this.prevBtn.addEventListener('click', () => this.previousTrack());
        this.nextBtn.addEventListener('click', () => this.nextTrack());
        
        // Volume
        this.volumeBtn.addEventListener('click', () => this.toggleMute());
        this.volumeSlider.addEventListener('input', (e) => this.setVolume(e.target.value / 100));
        
        // Progress
        this.progressContainer.addEventListener('click', (e) => this.seek(e));
        this.progressContainer.addEventListener('mousemove', (e) => this.updateProgressHandle(e));
        
        // Minimize
        this.minimizeBtn.addEventListener('click', () => this.toggleMinimize());
        
        // Audio events
        this.audio.addEventListener('loadedmetadata', () => this.updateDuration());
        this.audio.addEventListener('timeupdate', () => this.updateProgress());
        this.audio.addEventListener('ended', () => this.nextTrack());
        this.audio.addEventListener('error', (e) => this.handleError(e));
        
        // Keyboard shortcuts
        document.addEventListener('keydown', (e) => this.handleKeyboard(e));
    }
    
    setupAudio() {
        this.audio.volume = this.volume;
        this.audio.preload = 'metadata';
    }
    
    playTrack(audioUrl, title, artist, trackId = null) {
        if (!audioUrl) {
            console.warn('No audio URL provided');
            return;
        }
        
        this.currentTrack = {
            url: audioUrl,
            title: title || 'Unknown Track',
            artist: artist || 'Unknown Artist',
            id: trackId
        };
        
        this.trackTitle.textContent = this.currentTrack.title;
        this.trackArtist.textContent = this.currentTrack.artist;
        
        this.audio.src = audioUrl;
        this.audio.load();
        
        this.play();
    }
    
    play() {
        this.audio.play().then(() => {
            this.isPlaying = true;
            this.updatePlayButton();
        }).catch(error => {
            console.error('Error playing audio:', error);
            this.handleError(error);
        });
    }
    
    pause() {
        this.audio.pause();
        this.isPlaying = false;
        this.updatePlayButton();
    }
    
    togglePlay() {
        if (this.isPlaying) {
            this.pause();
        } else {
            this.play();
        }
    }
    
    previousTrack() {
        if (this.playlist.length > 0) {
            this.currentIndex = Math.max(0, this.currentIndex - 1);
            this.loadTrackFromPlaylist();
        }
    }
    
    nextTrack() {
        if (this.playlist.length > 0) {
            this.currentIndex = Math.min(this.playlist.length - 1, this.currentIndex + 1);
            this.loadTrackFromPlaylist();
        }
    }
    
    loadTrackFromPlaylist() {
        if (this.playlist[this.currentIndex]) {
            const track = this.playlist[this.currentIndex];
            this.playTrack(track.url, track.title, track.artist, track.id);
        }
    }
    
    setVolume(volume) {
        this.volume = Math.max(0, Math.min(1, volume));
        this.audio.volume = this.volume;
        this.updateVolumeButton();
    }
    
    toggleMute() {
        if (this.audio.volume > 0) {
            this.audio.volume = 0;
            this.volumeSlider.value = 0;
        } else {
            this.audio.volume = this.volume;
            this.volumeSlider.value = this.volume * 100;
        }
        this.updateVolumeButton();
    }
    
    seek(event) {
        const rect = this.progressContainer.getBoundingClientRect();
        const clickX = event.clientX - rect.left;
        const width = rect.width;
        const seekTime = (clickX / width) * this.audio.duration;
        this.audio.currentTime = seekTime;
    }
    
    updateProgressHandle(event) {
        const rect = this.progressContainer.getBoundingClientRect();
        const mouseX = event.clientX - rect.left;
        const width = rect.width;
        const percentage = Math.max(0, Math.min(100, (mouseX / width) * 100));
        this.progressHandle.style.left = percentage + '%';
    }
    
    updateProgress() {
        if (this.audio.duration) {
            const progress = (this.audio.currentTime / this.audio.duration) * 100;
            this.progressFill.style.width = progress + '%';
            this.progressHandle.style.left = progress + '%';
            this.currentTimeDisplay.textContent = this.formatTime(this.audio.currentTime);
        }
    }
    
    updateDuration() {
        this.durationDisplay.textContent = this.formatTime(this.audio.duration);
    }
    
    updatePlayButton() {
        if (this.isPlaying) {
            this.playIcon.className = 'fas fa-pause';
            this.playBtn.classList.add('playing');
        } else {
            this.playIcon.className = 'fas fa-play';
            this.playBtn.classList.remove('playing');
        }
    }
    
    updateVolumeButton() {
        if (this.audio.volume === 0) {
            this.volumeIcon.className = 'fas fa-volume-mute';
        } else if (this.audio.volume < 0.5) {
            this.volumeIcon.className = 'fas fa-volume-down';
        } else {
            this.volumeIcon.className = 'fas fa-volume-up';
        }
    }
    
    toggleMinimize() {
        this.isMinimized = !this.isMinimized;
        this.player.classList.toggle('minimized', this.isMinimized);
        
        const icon = this.minimizeBtn.querySelector('i');
        if (this.isMinimized) {
            icon.className = 'fas fa-chevron-up';
        } else {
            icon.className = 'fas fa-chevron-down';
        }
    }
    
    showPlayer() {
        this.player.classList.remove('hidden');
    }
    
    hidePlayer() {
        this.player.classList.add('hidden');
    }
    
    setPlaylist(playlist) {
        this.playlist = playlist;
        this.currentIndex = 0;
        if (playlist.length > 0) {
            this.loadTrackFromPlaylist();
        }
    }
    
    formatTime(seconds) {
        if (isNaN(seconds)) return '0:00';
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${mins}:${secs.toString().padStart(2, '0')}`;
    }
    
    handleError(error) {
        console.error('Music player error:', error);
        this.pause();
        this.trackTitle.textContent = 'Error playing track';
        this.trackArtist.textContent = 'Please try again';
    }
    
    handleKeyboard(event) {
        switch(event.code) {
            case 'Space':
                event.preventDefault();
                this.togglePlay();
                break;
            case 'ArrowLeft':
                event.preventDefault();
                this.previousTrack();
                break;
            case 'ArrowRight':
                event.preventDefault();
                this.nextTrack();
                break;
            case 'ArrowUp':
                event.preventDefault();
                this.setVolume(Math.min(1, this.volume + 0.1));
                this.volumeSlider.value = this.volume * 100;
                break;
            case 'ArrowDown':
                event.preventDefault();
                this.setVolume(Math.max(0, this.volume - 0.1));
                this.volumeSlider.value = this.volume * 100;
                break;
        }
    }
}

// Initialize the music player when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    window.musicPlayer = new MusicPlayer();
    
    // Expose player methods globally for compatibility
    window.playTrack = function(audioUrl, title, artist, trackId) {
        window.musicPlayer.playTrack(audioUrl, title, artist, trackId);
    };
    
    window.showPlayer = function() {
        window.musicPlayer.showPlayer();
    };
    
    console.log('🎵 Modern Music Player initialized');
});
</script>