 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();
// Get user ID from URL parameter
$user_id = isset($_GET['user']) ? (int)$_GET['user'] : null;
$track_id = isset($_GET['track']) ? $_GET['track'] : null;
if (!$user_id) {
header('Location: /');
exit;
}
// Include database configuration
require_once 'config/database.php';
// Get user info
$pdo = getDBConnection();
$stmt = $pdo->prepare("SELECT name as user_name, email FROM users WHERE id = ?");
$stmt->execute([$user_id]);
$user = $stmt->fetch();
if (!$user) {
header('Location: /');
exit;
}
// Get user's public tracks
$stmt = $pdo->prepare("
SELECT * FROM music_tracks
WHERE user_id = ? AND status = 'complete' AND audio_url IS NOT NULL
ORDER BY created_at DESC
");
$stmt->execute([$user_id]);
$tracks = $stmt->fetchAll();
// Get specific track if requested
$current_track = null;
if ($track_id) {
$stmt = $pdo->prepare("SELECT * FROM music_tracks WHERE id = ? AND user_id = ? AND status = 'complete'");
$stmt->execute([$track_id, $user_id]);
$current_track = $stmt->fetch();
}
?>
<!DOCTYPE html>
<?php
// Include header for color scheme
include 'includes/header.php';
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($user['user_name']); ?> - 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;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
}
/* Header */
.player-header {
background: var(--bg-overlay);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--bg-card);
padding: 2rem;
text-align: center;
}
.artist-info {
margin-bottom: 2rem;
}
.artist-avatar {
width: 120px;
height: 120px;
background: linear-gradient(135deg, var(--text-accent), var(--text-accent));
border-radius: 50%;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
font-weight: bold;
border: 4px solid var(--bg-card);
}
.artist-name {
font-size: 3.2rem;
font-weight: bold;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, var(--text-accent), var(--text-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.artist-tagline {
font-size: 1.6rem;
color: var(--text-secondary);
margin-bottom: 2rem;
}
.stats-bar {
display: flex;
justify-content: center;
gap: 3rem;
margin-bottom: 2rem;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 2.4rem;
font-weight: bold;
color: var(--text-accent);
}
.stat-label {
font-size: 1.2rem;
color: var(--text-secondary);
}
/* Main Player */
.player-container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
.player-card {
background: linear-gradient(135deg, var(--bg-card), rgba(255, 255, 255, 0.02));
border: 1px solid var(--bg-card);
border-radius: 20px;
padding: 3rem;
backdrop-filter: blur(20px);
margin-bottom: 3rem;
}
.player-title {
font-size: 2.4rem;
font-weight: bold;
margin-bottom: 1rem;
text-align: center;
}
.player-subtitle {
font-size: 1.6rem;
color: var(--text-secondary);
text-align: center;
margin-bottom: 3rem;
}
/* Visualizer */
.visualizer {
height: 100px;
background: var(--bg-overlay);
border-radius: 10px;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
}
.visualizer-bars {
display: flex;
align-items: flex-end;
justify-content: center;
height: 100%;
gap: 2px;
padding: 1rem;
}
.visualizer-bar {
width: 4px;
background: linear-gradient(135deg, var(--text-accent), var(--text-accent));
border-radius: 2px;
transition: height 0.1s ease;
}
/* Player Controls */
.player-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
}
.control-btn {
background: none;
border: none;
color: var(--text-primary);
font-size: 2.4rem;
cursor: pointer;
padding: 1rem;
border-radius: 50%;
transition: all 0.3s ease;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.control-btn:hover {
background: var(--bg-card);
transform: scale(1.1);
}
.play-btn {
background: linear-gradient(135deg, var(--text-accent), var(--text-accent));
font-size: 3rem;
width: 80px;
height: 80px;
}
.play-btn:hover {
transform: scale(1.1);
box-shadow: 0 10px 30px var(--shadow-heavy);
}
/* Progress Bar */
.progress-container {
margin-bottom: 2rem;
}
.progress-bar { background: var(--border-light);
border-radius: 4px;
cursor: pointer;
position: relative;
margin-bottom: 1rem;
}
.progress-fill { background: var(--primary-gradient);
border-radius: 4px;
width: 0%;
transition: width 0.1s ease;
}
.time-display {
display: flex;
justify-content: space-between;
font-size: 1.4rem;
color: var(--text-secondary);
}
/* Volume Control */
.volume-control {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.volume-slider {
width: 150px;
height: 6px;
background: var(--border-medium);
border-radius: 3px;
cursor: pointer;
-webkit-appearance: none;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: var(--text-accent);
border-radius: 50%;
cursor: pointer;
}
.volume-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: var(--text-accent);
border-radius: 50%;
cursor: pointer;
border: none;
}
/* Track Info */
.track-info {
text-align: center;
margin-bottom: 2rem;
}
.track-title {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.track-description {
font-size: 1.4rem;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.track-meta {
display: flex;
justify-content: center;
gap: 2rem;
font-size: 1.2rem;
color: var(--text-secondary);
}
/* Purchase Section */
.purchase-section {
background: linear-gradient(135deg, var(--shadow-light), rgba(118, 75, 162, 0.1));
border: 1px solid var(--glow-accent);
border-radius: 15px;
padding: 2rem;
text-align: center;
margin-bottom: 3rem;
}
.purchase-title {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1rem;
}
.purchase-description {
font-size: 1.4rem;
color: var(--text-secondary);
margin-bottom: 2rem;
}
.purchase-btn {
background: linear-gradient(135deg, #48bb78, #38a169);
color: var(--text-primary);
border: none;
padding: 1rem 2rem;
border-radius: 10px;
font-size: 1.6rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 1rem;
}
.purchase-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
/* Track List */
.tracks-section {
margin-top: 3rem;
}
.tracks-title {
font-size: 2.4rem;
font-weight: bold;
margin-bottom: 2rem;
text-align: center;
}
.tracks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.track-item {
background: linear-gradient(135deg, var(--bg-card), rgba(255, 255, 255, 0.02));
border: 1px solid var(--bg-card);
border-radius: 15px;
padding: 2rem;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(20px);
}
.track-item:hover {
transform: translateY(-5px);
border-color: var(--glow-accent);
box-shadow: 0 15px 45px var(--shadow-light);
}
.track-item.active {
border-color: var(--text-primary);
background: linear-gradient(135deg, rgba(72, 187, 120, 0.1), rgba(72, 187, 120, 0.05));
}
.track-item-title {
font-size: 1.6rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.track-item-description {
font-size: 1.2rem;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.track-item-meta {
display: flex;
justify-content: space-between;
font-size: 1rem;
color: var(--text-secondary);
}
/* Footer */
.player-footer {
text-align: center;
padding: 2rem;
color: var(--text-secondary);
font-size: 1.2rem;
}
.powered-by {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.powered-by i {
color: var(--text-accent);
}
/* Responsive */
@media (max-width: 768px) {
.player-container {
padding: 1rem;
}
.player-card {
padding: 2rem;
}
.artist-name {
font-size: 2.4rem;
}
.stats-bar {
gap: 2rem;
}
.tracks-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="player-header">
<div class="artist-info">
<div class="artist-avatar">
<?php echo strtoupper(substr($user['user_name'], 0, 1)); ?>
</div>
<h1 class="artist-name"><?php echo htmlspecialchars($user['user_name']); ?></h1>
<p class="artist-tagline">AI Music Creator on SoundStudioPro</p>
</div>
<div class="stats-bar">
<div class="stat-item">
<div class="stat-number"><?php echo count($tracks); ?></div>
<div class="stat-label">Tracks</div>
</div>
<div class="stat-item">
<div class="stat-number"><?php echo count($tracks); ?></div>
<div class="stat-label">Downloads</div>
</div>
<div class="stat-item">
<div class="stat-number"><?php echo count($tracks) * 2; ?></div>
<div class="stat-label">Plays</div>
</div>
</div>
</header>
<!-- Main Player -->
<div class="player-container">
<div class="player-card">
<h2 class="player-title">SoundStudioPro Player</h2>
<p class="player-subtitle">Listen to <?php echo htmlspecialchars($user['user_name']); ?>'s AI-generated music</p>
<!-- Visualizer -->
<div class="visualizer">
<div class="visualizer-bars" id="visualizer">
<?php for ($i = 0; $i < 50; $i++): ?>
<div class="visualizer-bar" style="height: <?php echo rand(10, 80); ?>px;"></div>
<?php endfor; ?>
</div>
</div>
<!-- Track Info -->
<div class="track-info" id="trackInfo">
<div class="track-title" id="currentTrackTitle">Select a track to play</div>
<div class="track-description" id="currentTrackDescription"></div>
<div class="track-meta">
<span id="currentTrackDuration">0:00</span>
<span id="currentTrackDate"></span>
</div>
</div>
<!-- Player Controls -->
<div class="player-controls">
<button class="control-btn" onclick="previousTrack()">
<i class="fas fa-step-backward"></i>
</button>
<button class="control-btn play-btn" onclick="togglePlay()" id="playBtn">
<i class="fas fa-play"></i>
</button>
<button class="control-btn" onclick="nextTrack()">
<i class="fas fa-step-forward"></i>
</button>
</div>
<!-- Progress Bar -->
<div class="progress-container">
<div class="progress-bar" onclick="seekTo(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>
<!-- Volume Control -->
<div class="volume-control">
<i class="fas fa-volume-up"></i>
<input type="range" class="volume-slider" min="0" max="100" value="100" onchange="setVolume(this.value)">
</div>
<!-- Purchase Section -->
<div class="purchase-section" id="purchaseSection" style="display: none;">
<h3 class="purchase-title">Purchase This Track</h3>
<p class="purchase-description">Get the full quality version and support the artist</p>
<button class="purchase-btn" onclick="purchaseTrack()">
<i class="fas fa-shopping-cart"></i>
Buy for $2.99
</button>
</div>
</div>
<!-- Track List -->
<?php if (!empty($tracks)): ?>
<div class="tracks-section">
<h3 class="tracks-title">Available Tracks</h3>
<div class="tracks-grid">
<?php foreach ($tracks as $track): ?>
<div class="track-item" data-track='<?php echo json_encode($track); ?>' onclick="loadTrack(this)">
<div class="track-item-title"><?php echo htmlspecialchars($track['title']); ?></div>
<div class="track-item-description"><?php echo htmlspecialchars($track['prompt']); ?></div>
<div class="track-item-meta">
<span><?php echo $track['duration']; ?>s</span>
<span><?php echo date('M j, Y', strtotime($track['created_at'])); ?></span>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
<!-- Footer -->
<footer class="player-footer">
<div class="powered-by">
<i class="fas fa-music"></i>
Powered by SoundStudioPro
</div>
<p>AI Music Creation Platform</p>
</footer>
<audio id="audioElement" preload="metadata"></audio>
<script>
let currentTrack = null;
let isPlaying = false;
let currentTrackIndex = -1;
let tracks = <?php echo json_encode($tracks); ?>;
let visualizerInterval;
// Initialize with first track if available
if (tracks.length > 0) {
loadTrackByIndex(0);
}
function loadTrack(trackElement) {
const trackData = JSON.parse(trackElement.dataset.track);
currentTrack = trackData;
// Update UI
document.querySelectorAll('.track-item').forEach(item => item.classList.remove('active'));
trackElement.classList.add('active');
document.getElementById('currentTrackTitle').textContent = trackData.title;
document.getElementById('currentTrackDescription').textContent = trackData.prompt;
document.getElementById('currentTrackDuration').textContent = trackData.duration + 's';
document.getElementById('currentTrackDate').textContent = new Date(trackData.created_at).toLocaleDateString();
// Load audio
const audio = document.getElementById('audioElement');
audio.src = trackData.audio_url;
// Show purchase section
document.getElementById('purchaseSection').style.display = 'block';
// Update current track index
currentTrackIndex = tracks.findIndex(t => t.id === trackData.id);
}
function loadTrackByIndex(index) {
if (index >= 0 && index < tracks.length) {
const trackElement = document.querySelectorAll('.track-item')[index];
loadTrack(trackElement);
}
}
function togglePlay() {
const audio = document.getElementById('audioElement');
const playBtn = document.getElementById('playBtn');
if (!currentTrack) {
if (tracks.length > 0) {
loadTrackByIndex(0);
}
return;
}
if (isPlaying) {
audio.pause();
playBtn.innerHTML = '<i class="fas fa-play"></i>';
isPlaying = false;
stopVisualizer();
} else {
audio.play().then(() => {
playBtn.innerHTML = '<i class="fas fa-pause"></i>';
isPlaying = true;
startVisualizer();
}).catch(error => {
console.error('Error playing audio:', error);
alert('Error playing track. Please try again.');
});
}
}
function previousTrack() {
if (currentTrackIndex > 0) {
loadTrackByIndex(currentTrackIndex - 1);
if (isPlaying) {
setTimeout(() => togglePlay(), 100);
}
}
}
function nextTrack() {
if (currentTrackIndex < tracks.length - 1) {
loadTrackByIndex(currentTrackIndex + 1);
if (isPlaying) {
setTimeout(() => togglePlay(), 100);
}
}
}
function seekTo(event) {
const audio = document.getElementById('audioElement');
const progressBar = event.currentTarget;
const rect = progressBar.getBoundingClientRect();
const percent = (event.clientX - rect.left) / rect.width;
audio.currentTime = percent * audio.duration;
}
function setVolume(value) {
const audio = document.getElementById('audioElement');
audio.volume = value / 100;
}
function startVisualizer() {
visualizerInterval = setInterval(() => {
const bars = document.querySelectorAll('.visualizer-bar');
bars.forEach(bar => {
const height = Math.random() * 80 + 10;
bar.style.height = height + 'px';
});
}, 100);
}
function stopVisualizer() {
if (visualizerInterval) {
clearInterval(visualizerInterval);
const bars = document.querySelectorAll('.visualizer-bar');
bars.forEach(bar => {
bar.style.height = '10px';
});
}
}
function purchaseTrack() {
if (!currentTrack) {
alert('Please select a track first');
return;
}
// Here you would integrate with your payment system
alert('Purchase functionality coming soon! Track: ' + currentTrack.title);
}
// Audio event listeners
document.getElementById('audioElement').addEventListener('timeupdate', function() {
const audio = this;
const progressFill = document.getElementById('progressFill');
const currentTime = document.getElementById('currentTime');
const totalTime = document.getElementById('totalTime');
if (audio.duration) {
const progress = (audio.currentTime / audio.duration) * 100;
progressFill.style.width = progress + '%';
currentTime.textContent = formatTime(audio.currentTime);
totalTime.textContent = formatTime(audio.duration);
}
});
document.getElementById('audioElement').addEventListener('ended', function() {
const playBtn = document.getElementById('playBtn');
playBtn.innerHTML = '<i class="fas fa-play"></i>';
isPlaying = false;
stopVisualizer();
// Auto-play next track
nextTrack();
});
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
}
// Keyboard shortcuts
document.addEventListener('keydown', function(event) {
switch(event.code) {
case 'Space':
event.preventDefault();
togglePlay();
break;
case 'ArrowLeft':
previousTrack();
break;
case 'ArrowRight':
nextTrack();
break;
}
});
</script>
</body>
</html>