 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/private_html/utils/ |
<?php
session_start();
// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
header('Location: /auth/login_new.php');
exit;
}
// Get user name from database
$stmt = $pdo->prepare("SELECT name FROM users WHERE id = ?");
$stmt->execute([$_SESSION['user_id']]);
$user = $stmt->fetch();
$user_name = $user['name'] ?? 'User';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Player Functionality Test - SoundStudioPro</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
overflow-x: hidden;
min-height: 100vh;
line-height: 1.6;
}
.container {
max-width: 120rem;
margin: 0 auto;
padding: 2rem;
}
.test-header {
text-align: center;
margin-bottom: 4rem;
}
.test-title {
font-size: 4.8rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, #ffffff, #667eea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.test-subtitle {
font-size: 2rem;
color: #a0aec0;
margin-bottom: 3rem;
}
.test-section {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 3rem;
margin-bottom: 3rem;
backdrop-filter: blur(20px);
}
.section-title {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 2rem;
color: white;
}
.test-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.test-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
}
.test-card:hover {
transform: translateY(-5px);
border-color: #667eea;
box-shadow: 0 15px 45px rgba(102, 126, 234, 0.2);
}
.test-card-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 1rem;
color: white;
}
.test-card-description {
color: #a0aec0;
font-size: 1.4rem;
margin-bottom: 2rem;
}
.test-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 12px;
font-size: 1.4rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.8rem;
margin-right: 1rem;
margin-bottom: 1rem;
}
.test-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.test-btn.secondary {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 0.8rem;
}
.status-success {
background: #48bb78;
}
.status-error {
background: #f56565;
}
.status-warning {
background: #ed8936;
}
.status-info {
background: #4299e1;
}
.test-results {
background: rgba(0, 0, 0, 0.3);
border-radius: 12px;
padding: 2rem;
margin-top: 2rem;
}
.result-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
font-size: 1.4rem;
}
.result-item:last-child {
margin-bottom: 0;
}
/* Winamp-style Player */
.winamp-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: linear-gradient(90deg, #2c3e50, #34495e);
border-top: 2px solid #3498db;
box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
}
.player-main {
display: flex;
align-items: center;
padding: 10px 20px;
height: 80px;
}
.player-controls {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
}
.control-btn {
background: #3498db;
border: none;
color: white;
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
.control-btn:hover {
background: #2980b9;
transform: scale(1.05);
}
.play-btn {
background: #27ae60;
padding: 12px 16px;
border-radius: 50%;
}
.play-btn:hover {
background: #229954;
}
.track-info {
flex: 1;
margin: 0 20px;
}
.track-title {
font-weight: bold;
font-size: 14px;
margin-bottom: 5px;
}
.track-artist {
font-size: 12px;
opacity: 0.8;
}
.progress-container {
flex: 1;
margin: 0 20px;
}
.progress-bar {
width: 100%;
height: 6px;
background: #34495e;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #3498db, #27ae60);
width: 0%;
transition: width 0.1s;
}
.time-display {
font-size: 12px;
margin-top: 5px;
text-align: center;
}
.volume-control {
display: flex;
align-items: center;
gap: 10px;
margin-left: 20px;
}
.volume-slider {
width: 80px;
height: 4px;
background: #34495e;
border-radius: 2px;
cursor: pointer;
}
@media (max-width: 768px) {
html { font-size: 56.25%; }
.test-title { font-size: 3.6rem; }
.test-subtitle { font-size: 1.8rem; }
.container { padding: 1.5rem; }
.test-section { padding: 2rem; }
}
</style>
</head>
<body>
<div class="container">
<div class="test-header">
<h1 class="test-title">🎵 Player Functionality Test</h1>
<p class="test-subtitle">Testing audio playback capabilities before API integration</p>
</div>
<div class="test-section">
<h2 class="section-title">🔧 Player Component Tests</h2>
<div class="test-grid">
<div class="test-card">
<h3 class="test-card-title">Basic Audio Playback</h3>
<p class="test-card-description">Test if the player can play simple audio files</p>
<button class="test-btn" onclick="testBasicPlayback()">
<i class="fas fa-play"></i> Test Basic Playback
</button>
<div id="basicResult" class="test-results" style="display: none;"></div>
</div>
<div class="test-card">
<h3 class="test-card-title">Player Controls</h3>
<p class="test-card-description">Test play, pause, next, previous controls</p>
<button class="test-btn" onclick="testPlayerControls()">
<i class="fas fa-cogs"></i> Test Controls
</button>
<div id="controlsResult" class="test-results" style="display: none;"></div>
</div>
<div class="test-card">
<h3 class="test-card-title">Progress Bar</h3>
<p class="test-card-description">Test seeking and progress tracking</p>
<button class="test-btn" onclick="testProgressBar()">
<i class="fas fa-chart-line"></i> Test Progress
</button>
<div id="progressResult" class="test-results" style="display: none;"></div>
</div>
<div class="test-card">
<h3 class="test-card-title">Volume Control</h3>
<p class="test-card-description">Test volume adjustment functionality</p>
<button class="test-btn" onclick="testVolumeControl()">
<i class="fas fa-volume-up"></i> Test Volume
</button>
<div id="volumeResult" class="test-results" style="display: none;"></div>
</div>
</div>
</div>
<div class="test-section">
<h2 class="section-title">🎵 Sample Audio Tests</h2>
<div class="test-grid">
<div class="test-card">
<h3 class="test-card-title">Sample MP3 File</h3>
<p class="test-card-description">Test with a sample MP3 file</p>
<button class="test-btn" onclick="playSampleMP3()">
<i class="fas fa-music"></i> Play Sample MP3
</button>
<button class="test-btn secondary" onclick="downloadSampleMP3()">
<i class="fas fa-download"></i> Download
</button>
</div>
<div class="test-card">
<h3 class="test-card-title">Sample WAV File</h3>
<p class="test-card-description">Test with a sample WAV file</p>
<button class="test-btn" onclick="playSampleWAV()">
<i class="fas fa-music"></i> Play Sample WAV
</button>
<button class="test-btn secondary" onclick="downloadSampleWAV()">
<i class="fas fa-download"></i> Download
</button>
</div>
<div class="test-card">
<h3 class="test-card-title">External Audio URL</h3>
<p class="test-card-description">Test with external audio URL</p>
<button class="test-btn" onclick="playExternalAudio()">
<i class="fas fa-globe"></i> Play External
</button>
<div id="externalResult" class="test-results" style="display: none;"></div>
</div>
<div class="test-card">
<h3 class="test-card-title">Audio Format Support</h3>
<p class="test-card-description">Test different audio formats</p>
<button class="test-btn" onclick="testAudioFormats()">
<i class="fas fa-file-audio"></i> Test Formats
</button>
<div id="formatsResult" class="test-results" style="display: none;"></div>
</div>
</div>
</div>
<div class="test-section">
<h2 class="section-title">🔍 Browser Compatibility</h2>
<div class="test-grid">
<div class="test-card">
<h3 class="test-card-title">Audio API Support</h3>
<p class="test-card-description">Check browser audio capabilities</p>
<button class="test-btn" onclick="checkAudioSupport()">
<i class="fas fa-check-circle"></i> Check Support
</button>
<div id="supportResult" class="test-results" style="display: none;"></div>
</div>
<div class="test-card">
<h3 class="test-card-title">Error Handling</h3>
<p class="test-card-description">Test error handling for failed loads</p>
<button class="test-btn" onclick="testErrorHandling()">
<i class="fas fa-exclamation-triangle"></i> Test Errors
</button>
<div id="errorResult" class="test-results" style="display: none;"></div>
</div>
</div>
</div>
</div>
<!-- Winamp-style Player -->
<div class="winamp-container" id="player">
<div class="player-main">
<div class="player-controls">
<button class="control-btn" onclick="previousTrack()">
<i class="fas fa-step-backward"></i>
</button>
<button class="control-btn play-btn" id="playPauseBtn" onclick="togglePlay()">
<i class="fas fa-play" id="playIcon"></i>
</button>
<button class="control-btn" onclick="nextTrack()">
<i class="fas fa-step-forward"></i>
</button>
</div>
<div class="track-info">
<div class="track-title" id="currentTrackTitle">No track selected</div>
<div class="track-artist" id="currentTrackArtist">SoundStudioPro Test</div>
</div>
<div class="progress-container">
<div class="progress-bar" onclick="seek(event)">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="time-display">
<span id="currentTime">0:00</span> / <span id="totalTime">0:00</span>
</div>
</div>
<div class="volume-control">
<i class="fas fa-volume-up"></i>
<div class="volume-slider" onclick="setVolume(event)">
<div style="width: 70%; height: 100%; background: #3498db;"></div>
</div>
</div>
</div>
</div>
<script>
let currentAudio = null;
let isPlaying = false;
let testPlaylist = [];
// Sample audio URLs for testing
const sampleAudioUrls = {
mp3: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.wav', // Using WAV as fallback
wav: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.wav',
external: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.wav'
};
// Test basic audio playback
function testBasicPlayback() {
const resultDiv = document.getElementById('basicResult');
resultDiv.style.display = 'block';
resultDiv.innerHTML = '';
try {
const audio = new Audio(sampleAudioUrls.mp3);
audio.addEventListener('loadeddata', () => {
addResult(resultDiv, 'success', 'Audio loaded successfully');
addResult(resultDiv, 'success', `Duration: ${formatTime(audio.duration)}`);
addResult(resultDiv, 'success', `Format: ${audio.src.split('.').pop()}`);
});
audio.addEventListener('error', (e) => {
addResult(resultDiv, 'error', 'Failed to load audio: ' + e.message);
});
audio.load();
} catch (error) {
addResult(resultDiv, 'error', 'Audio API not supported: ' + error.message);
}
}
// Test player controls
function testPlayerControls() {
const resultDiv = document.getElementById('controlsResult');
resultDiv.style.display = 'block';
resultDiv.innerHTML = '';
addResult(resultDiv, 'info', 'Testing player controls...');
// Test if we can create and control audio
try {
const audio = new Audio(sampleAudioUrls.mp3);
// Test play
audio.play().then(() => {
addResult(resultDiv, 'success', 'Play function works');
audio.pause();
addResult(resultDiv, 'success', 'Pause function works');
}).catch(error => {
addResult(resultDiv, 'error', 'Play failed: ' + error.message);
});
} catch (error) {
addResult(resultDiv, 'error', 'Audio controls not supported: ' + error.message);
}
}
// Test progress bar
function testProgressBar() {
const resultDiv = document.getElementById('progressResult');
resultDiv.style.display = 'block';
resultDiv.innerHTML = '';
addResult(resultDiv, 'info', 'Testing progress tracking...');
try {
const audio = new Audio(sampleAudioUrls.mp3);
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
addResult(resultDiv, 'success', `Progress: ${progress.toFixed(1)}%`);
});
audio.addEventListener('loadedmetadata', () => {
addResult(resultDiv, 'success', 'Progress tracking enabled');
});
audio.load();
} catch (error) {
addResult(resultDiv, 'error', 'Progress tracking failed: ' + error.message);
}
}
// Test volume control
function testVolumeControl() {
const resultDiv = document.getElementById('volumeResult');
resultDiv.style.display = 'block';
resultDiv.innerHTML = '';
try {
const audio = new Audio(sampleAudioUrls.mp3);
// Test volume setting
audio.volume = 0.5;
addResult(resultDiv, 'success', 'Volume control works');
addResult(resultDiv, 'success', `Volume set to: ${audio.volume * 100}%`);
} catch (error) {
addResult(resultDiv, 'error', 'Volume control failed: ' + error.message);
}
}
// Play sample MP3
function playSampleMP3() {
playTrack(sampleAudioUrls.mp3, 'Sample MP3', 'Test Audio');
}
// Play sample WAV
function playSampleWAV() {
playTrack(sampleAudioUrls.wav, 'Sample WAV', 'Test Audio');
}
// Play external audio
function playExternalAudio() {
const resultDiv = document.getElementById('externalResult');
resultDiv.style.display = 'block';
resultDiv.innerHTML = '';
addResult(resultDiv, 'info', 'Testing external audio URL...');
try {
playTrack(sampleAudioUrls.external, 'External Audio', 'Test Audio');
addResult(resultDiv, 'success', 'External audio loaded successfully');
} catch (error) {
addResult(resultDiv, 'error', 'External audio failed: ' + error.message);
}
}
// Test audio formats
function testAudioFormats() {
const resultDiv = document.getElementById('formatsResult');
resultDiv.style.display = 'block';
resultDiv.innerHTML = '';
const formats = ['mp3', 'wav', 'ogg', 'm4a'];
formats.forEach(format => {
const audio = new Audio();
const canPlay = audio.canPlayType(`audio/${format}`);
if (canPlay === 'probably' || canPlay === 'maybe') {
addResult(resultDiv, 'success', `${format.toUpperCase()}: Supported`);
} else {
addResult(resultDiv, 'warning', `${format.toUpperCase()}: Not supported`);
}
});
}
// Check audio support
function checkAudioSupport() {
const resultDiv = document.getElementById('supportResult');
resultDiv.style.display = 'block';
resultDiv.innerHTML = '';
// Check if Audio API is supported
if (typeof Audio !== 'undefined') {
addResult(resultDiv, 'success', 'Audio API: Supported');
} else {
addResult(resultDiv, 'error', 'Audio API: Not supported');
}
// Check if Web Audio API is supported
if (typeof AudioContext !== 'undefined' || typeof webkitAudioContext !== 'undefined') {
addResult(resultDiv, 'success', 'Web Audio API: Supported');
} else {
addResult(resultDiv, 'warning', 'Web Audio API: Not supported');
}
// Check browser info
addResult(resultDiv, 'info', `Browser: ${navigator.userAgent}`);
}
// Test error handling
function testErrorHandling() {
const resultDiv = document.getElementById('errorResult');
resultDiv.style.display = 'block';
resultDiv.innerHTML = '';
addResult(resultDiv, 'info', 'Testing error handling...');
try {
const audio = new Audio('invalid-url.mp3');
audio.addEventListener('error', (e) => {
addResult(resultDiv, 'success', 'Error handling works: Invalid URL caught');
});
audio.load();
} catch (error) {
addResult(resultDiv, 'error', 'Error handling failed: ' + error.message);
}
}
// Helper functions
function addResult(container, type, message) {
const div = document.createElement('div');
div.className = 'result-item';
div.innerHTML = `<span class="status-indicator status-${type}"></span>${message}`;
container.appendChild(div);
}
function 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')}`;
}
// Player functions
function playTrack(audioUrl, title, artist) {
if (currentAudio) {
currentAudio.pause();
}
currentAudio = new Audio(audioUrl);
currentAudio.addEventListener('loadedmetadata', () => {
document.getElementById('totalTime').textContent = formatTime(currentAudio.duration);
});
currentAudio.addEventListener('timeupdate', () => {
const progress = (currentAudio.currentTime / currentAudio.duration) * 100;
document.getElementById('progressFill').style.width = progress + '%';
document.getElementById('currentTime').textContent = formatTime(currentAudio.currentTime);
});
currentAudio.addEventListener('ended', () => {
isPlaying = false;
document.getElementById('playIcon').className = 'fas fa-play';
});
currentAudio.play();
isPlaying = true;
document.getElementById('currentTrackTitle').textContent = title;
document.getElementById('currentTrackArtist').textContent = artist;
document.getElementById('playIcon').className = 'fas fa-pause';
}
function togglePlay() {
if (!currentAudio) return;
if (isPlaying) {
currentAudio.pause();
document.getElementById('playIcon').className = 'fas fa-play';
} else {
currentAudio.play();
document.getElementById('playIcon').className = 'fas fa-pause';
}
isPlaying = !isPlaying;
}
function seek(event) {
if (!currentAudio) return;
const rect = event.target.getBoundingClientRect();
const clickX = event.clientX - rect.left;
const width = rect.width;
const seekTime = (clickX / width) * currentAudio.duration;
currentAudio.currentTime = seekTime;
}
function setVolume(event) {
if (!currentAudio) return;
const rect = event.target.getBoundingClientRect();
const clickX = event.clientX - rect.left;
const width = rect.width;
const volume = clickX / width;
currentAudio.volume = volume;
}
function nextTrack() {
// For testing, just restart current track
if (currentAudio) {
currentAudio.currentTime = 0;
currentAudio.play();
}
}
function previousTrack() {
// For testing, just restart current track
if (currentAudio) {
currentAudio.currentTime = 0;
currentAudio.play();
}
}
// Download functions
function downloadSampleMP3() {
const link = document.createElement('a');
link.href = sampleAudioUrls.mp3;
link.download = 'sample.mp3';
link.click();
}
function downloadSampleWAV() {
const link = document.createElement('a');
link.href = sampleAudioUrls.wav;
link.download = 'sample.wav';
link.click();
}
// Auto-run some tests on page load
window.addEventListener('load', () => {
setTimeout(() => {
checkAudioSupport();
}, 1000);
});
</script>
</body>
</html>