 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();
// Set page variables for header
$page_title = 'SoundStudioPro - Professional Music Creation & Social Platform';
$page_description = 'Create professional music, build your artist profile, share tracks, and connect with the music community. Perfect for studio owners and professional artists.';
// Include header
include 'includes/header.php';
?>
<style>
/* Reset & Base Styles */
* {
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;
line-height: 1.6;
color: var(--text-primary);
background: var(--bg-primary);
min-height: 100vh;
overflow-x: hidden;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-tertiary);
}
::-webkit-scrollbar-thumb {
background: var(--primary-gradient);
border-radius: 4px;
}
/* Container & Layout */
.container {
max-width: 140rem;
margin: 0 auto;
padding: 0 2rem;
}
/* Hero Section */
.hero {
padding: 20rem 0 15rem;
text-align: center;
color: var(--text-primary);
background: var(--bg-primary);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="var(--shadow-light)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
opacity: 0.3;
}
.hero-content {
max-width: 90rem;
margin: 0 auto;
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-block;
background: var(--bg-card);
color: var(--text-primary);
padding: 1.2rem 2.4rem;
border-radius: 50px;
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 3rem;
backdrop-filter: blur(10px);
border: 1px solid var(--border-medium);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.hero-title {
font-size: 7.2rem;
font-weight: 900;
line-height: 1.1;
margin-bottom: 2.4rem;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 3s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.hero-subtitle {
font-size: 2.4rem;
font-weight: 400;
margin-bottom: 4rem;
opacity: 0.9;
max-width: 70rem;
margin-left: auto;
margin-right: auto;
color: var(--text-secondary);
}
.hero-actions {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 2rem 4rem;
border-radius: 16px;
font-size: 1.6rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn-primary { background: var(--primary-gradient);
color: var(--text-primary);
box-shadow: var(--shadow-medium);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
}
.btn-secondary { background: var(--bg-card);
color: var(--text-primary);
border: 2px solid var(--border-medium);
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: var(--bg-secondary);
transform: translateY(-3px);
border-color: var(--border-medium);
}
/* Music Creation Interface */
.music-creator {
background: var(--bg-secondary);
padding: 8rem 0;
border-radius: 40px 40px 0 0;
margin-top: -4rem;
position: relative;
z-index: 10;
}
.creator-container {
max-width: 80rem;
margin: 0 auto;
}
.creator-header {
text-align: center;
margin-bottom: 6rem;
}
.creator-title {
font-size: 4.8rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 2rem;
}
.creator-subtitle {
font-size: 2rem;
color: var(--text-secondary);
}
.creator-form {
background: var(--bg-card);
padding: 4rem;
border-radius: 24px;
backdrop-filter: blur(20px);
border: 1px solid var(--bg-card);
}
.form-group {
margin-bottom: 3rem;
}
.form-label {
display: block;
font-size: 1.6rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
}
.form-input,
.form-textarea,
.form-select { background: var(--bg-secondary);
color: var(--text-primary);
font-size: 1.6rem;
transition: all 0.3s ease;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--text-accent);
background: var(--bg-card);
}
.form-textarea {
min-height: 12rem;
resize: vertical;
}
/* Dropdown Options Styling */
.form-select option {
background: var(--bg-tertiary);
color: var(--text-primary);
padding: 1rem;
}
.form-select option:hover {
background: var(--text-accent);
}
.form-select option:checked {
background: linear-gradient(135deg, var(--text-accent), var(--text-accent));
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.create-btn {
width: 100%;
padding: 2rem;
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(135deg, var(--text-accent), var(--text-accent));
color: var(--text-primary);
border: none;
border-radius: 16px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.create-btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px var(--shadow-heavy);
}
.create-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Results Section */
.results-section {
margin-top: 4rem;
display: none;
}
.results-header {
text-align: center;
margin-bottom: 3rem;
}
.results-title {
font-size: 3.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.audio-player {
background: var(--bg-card);
padding: 3rem;
border-radius: 20px;
margin-bottom: 2rem;
border: 1px solid var(--bg-card);
}
.audio-player audio {
width: 100%;
border-radius: 12px;
}
.download-btn {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 1.5rem 3rem;
background: linear-gradient(135deg, #48bb78, #38a169);
color: var(--text-primary);
text-decoration: none;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
.download-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
/* Features Section */
.features {
background: var(--bg-secondary);
padding: 8rem 0;
}
.section-header {
text-align: center;
margin-bottom: 6rem;
}
.section-title {
font-size: 4.8rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 2rem;
}
.section-subtitle {
font-size: 2rem;
color: var(--text-secondary);
max-width: 60rem;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
gap: 3rem;
}
.feature-card {
background: var(--bg-card);
padding: 4rem 3rem;
border-radius: 20px;
text-align: center;
backdrop-filter: blur(20px);
border: 1px solid var(--bg-card);
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
border-color: var(--glow-accent);
box-shadow: 0 30px 80px var(--shadow-medium);
}
.feature-icon {
font-size: 4rem;
color: var(--text-accent);
margin-bottom: 2rem;
}
.feature-title {
font-size: 2.4rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1.5rem;
}
.feature-description {
font-size: 1.6rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* Pricing Section */
.pricing {
background: var(--bg-primary);
padding: 8rem 0;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 3rem;
max-width: 100rem;
margin: 0 auto;
}
.pricing-card {
background: var(--bg-card);
padding: 4rem 3rem;
border-radius: 20px;
text-align: center;
backdrop-filter: blur(20px);
border: 1px solid var(--bg-card);
transition: all 0.3s ease;
position: relative;
}
.pricing-card:hover {
transform: translateY(-10px);
border-color: var(--glow-accent);
box-shadow: 0 30px 80px var(--shadow-medium);
}
.pricing-card.featured {
border-color: var(--glow-primary);
transform: scale(1.05);
}
.pricing-badge {
position: absolute;
top: -1rem;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--text-accent), var(--text-accent));
color: var(--text-primary);
padding: 0.8rem 2rem;
border-radius: 20px;
font-size: 1.2rem;
font-weight: 600;
}
.pricing-title {
font-size: 2.4rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.pricing-price {
font-size: 4.8rem;
font-weight: 900;
color: var(--text-accent);
margin-bottom: 0.5rem;
}
.pricing-period {
font-size: 1.6rem;
color: var(--text-secondary);
margin-bottom: 3rem;
}
.pricing-features {
list-style: none;
margin-bottom: 3rem;
}
.pricing-features li {
padding: 1rem 0;
color: var(--text-secondary);
font-size: 1.6rem;
display: flex;
align-items: center;
gap: 1rem;
}
.pricing-features i {
color: var(--text-primary);
font-size: 1.4rem;
}
/* CTA Section */
.cta {
background: var(--primary-gradient);
padding: 8rem 0;
text-align: center;
}
.cta-content {
max-width: 60rem;
margin: 0 auto;
}
.cta-title {
font-size: 4.8rem;
font-weight: 700;
margin-bottom: 2rem;
color: var(--text-primary);
}
.cta-description {
font-size: 2rem;
margin-bottom: 4rem;
opacity: 0.9;
color: var(--text-primary);
}
/* Responsive Design */
@media (max-width: 768px) {
html { font-size: 56.25%; }
.hero-title { font-size: 5.6rem; }
.hero-subtitle { font-size: 2rem; }
.section-title { font-size: 3.6rem; }
.hero-actions {
flex-direction: column;
align-items: center;
}
.btn { width: 100%; max-width: 30rem; justify-content: center; }
.features-grid { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
html { font-size: 50%; }
.hero-title { font-size: 4.8rem; }
.hero-subtitle { font-size: 1.8rem; }
.section-title { font-size: 3.2rem; }
.container { padding: 0 1.5rem; }
.creator-form { padding: 2rem; }
}
</style>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-badge">🎵 Advanced AI Music Creation</div>
<h1 class="hero-title">Create Professional Music with AI</h1>
<p class="hero-subtitle">Create studio-quality, watermark-free music tracks, lyrics, and music videos. Share your music, build your professional profile, and connect with other artists in our community.</p>
<div class="hero-actions">
<a href="#create" class="btn btn-primary">🎵 Start Creating Now</a>
<a href="#features" class="btn btn-secondary">Explore Features</a>
</div>
</div>
</div>
</section>
<!-- Music Creation Interface -->
<section id="create" class="music-creator">
<div class="container">
<div class="creator-container">
<div class="creator-header">
<h2 class="creator-title">Create Your Music</h2>
<p class="creator-subtitle">Describe your vision and let AI bring it to life</p>
</div>
<div class="creator-form">
<?php if (!isset($_SESSION['user_id'])): ?>
<div style="text-align: center; padding: 4rem;">
<div style="font-size: 6rem; margin-bottom: 2rem;">🔒</div>
<h3 style="color: var(--text-primary); font-size: 2.4rem; margin-bottom: 1.5rem;">Login Required</h3>
<p style="color: var(--text-secondary); font-size: 1.6rem; margin-bottom: 3rem;">You need to be logged in to create music. Join our community of artists!</p>
<div style="display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap;">
<a href="auth/login.php" class="btn btn-primary">Login</a>
<a href="auth/register.php" class="btn btn-secondary">Sign Up</a>
</div>
</div>
<?php else: ?>
<!-- Debug info (remove in production) -->
<?php if (isset($_GET['debug'])): ?>
<div style="background: var(--bg-card); padding: 1rem; margin-bottom: 2rem; border-radius: 8px; font-size: 1.2rem; color: var(--text-secondary);">
<strong>Debug Info:</strong><br>
User ID: <?= $_SESSION['user_id'] ?? 'Not set' ?><br>
Session ID: <?= session_id() ?><br>
Session Data: <?= htmlspecialchars(json_encode($_SESSION)) ?>
</div>
<?php endif; ?>
<form id="musicForm">
<div class="form-group">
<label class="form-label">Title</label>
<input type="text" class="form-input" id="title" placeholder="Enter a title for your music track" required>
</div>
<div class="form-group">
<label class="form-label">Prompt / Description</label>
<textarea class="form-textarea" id="prompt" placeholder="Describe the music you want to create. Be specific about genre, mood, instruments, tempo, etc. Example: 'An upbeat electronic dance track with heavy bass, synthesizers, and a driving beat. Should be energetic and perfect for a workout playlist.'" required></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Model Version</label>
<select class="form-select" id="modelVersion">
<option value="V4_5">Studio Pro (Best Quality)</option>
<option value="V4">Studio Elite (Premium)</option>
<option value="V3_5">Studio Advanced (Professional)</option>
<option value="V3">Studio Classic (Standard)</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Duration (seconds)</label>
<input type="number" class="form-input" id="duration" value="30" min="10" max="300" required>
</div>
</div>
<button type="submit" class="create-btn" id="createBtn">
<span id="loading" style="display: none;">
<i class="fas fa-spinner fa-spin"></i> Creating Music...
</span>
<span id="createText">
<i class="fas fa-magic"></i> Create Music
</span>
</button>
</form>
<!-- Results Section -->
<div id="results" class="results-section">
<div class="results-header">
<h3 class="results-title">Your Music is Ready!</h3>
</div>
<div id="audioPlayer" class="audio-player">
<audio id="audioElement" controls>
Your browser does not support the audio element.
</audio>
</div>
<a id="downloadBtn" href="#" class="download-btn">
<i class="fas fa-download"></i> Download MP3
</a>
</div>
<?php endif; ?>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="features">
<div class="container">
<div class="section-header">
<h2 class="section-title">Professional Music Creation Tools</h2>
<p class="section-subtitle">Everything you need to create, edit, and produce professional music with AI assistance.</p>
</div>
<div class="features-grid">
<div class="feature-card">
<i class="fas fa-music feature-icon"></i>
<h3 class="feature-title">AI Music Generation</h3>
<p class="feature-description">Create original AI music with custom prompts. Generate instrumental or lyrical tracks with multiple model versions for different styles and quality levels.</p>
</div>
<div class="feature-card">
<i class="fas fa-pen feature-icon"></i>
<h3 class="feature-title">Lyrics Generation</h3>
<p class="feature-description">Generate song lyrics independently based on your prompts. Get multiple variations with suggested titles and themes.</p>
</div>
<div class="feature-card">
<i class="fas fa-file-audio feature-icon"></i>
<h3 class="feature-title">WAV Conversion</h3>
<p class="feature-description">Convert your tracks to high-quality, lossless WAV format perfect for professional audio editing and mastering.</p>
</div>
<div class="feature-card">
<i class="fas fa-microphone-slash feature-icon"></i>
<h3 class="feature-title">Vocal Removal</h3>
<p class="feature-description">Separate vocals from music tracks. Get original, instrumental, and vocal components for remixing and karaoke.</p>
</div>
<div class="feature-card">
<i class="fas fa-video feature-icon"></i>
<h3 class="feature-title">Music Video Generation</h3>
<p class="feature-description">Create MP4 videos with visual effects synchronized to your music. Perfect for social media sharing and marketing.</p>
</div>
<div class="feature-card">
<i class="fas fa-chart-line feature-icon"></i>
<h3 class="feature-title">Track Extension</h3>
<p class="feature-description">Extend existing tracks from specific timestamps. Build upon your musical ideas seamlessly with AI assistance.</p>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="pricing">
<div class="container">
<div class="section-header">
<h2 class="section-title">Choose Your Plan</h2>
<p class="section-subtitle">Flexible pricing plans designed for creators of all levels. Start creating professional music today.</p>
</div>
<div class="pricing-grid">
<div class="pricing-card">
<h3 class="pricing-title">Free</h3>
<div class="pricing-price">$0</div>
<div class="pricing-period">forever</div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> 5 AI Music Tracks</li>
<li><i class="fas fa-check"></i> Basic Generation</li>
<li><i class="fas fa-check"></i> Community Access</li>
<li><i class="fas fa-check"></i> Personal Use Only</li>
<li><i class="fas fa-check"></i> Standard Quality</li>
<li><i class="fas fa-check"></i> No Commercial Rights</li>
</ul>
<a href="/auth/register.php" class="btn btn-primary">Sign Up Free</a>
</div>
<div class="pricing-card">
<h3 class="pricing-title">Starter</h3>
<div class="pricing-price">$29</div>
<div class="pricing-period">per month</div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> 25 AI Music Tracks</li>
<li><i class="fas fa-check"></i> Lyrics Generation</li>
<li><i class="fas fa-check"></i> WAV Conversion</li>
<li><i class="fas fa-check"></i> Basic Support</li>
<li><i class="fas fa-check"></i> Standard Quality</li>
</ul>
<a href="#create" class="btn btn-primary">Get Started</a>
</div>
<div class="pricing-card featured">
<div class="pricing-badge">Most Popular</div>
<h3 class="pricing-title">Creator</h3>
<div class="pricing-price">$79</div>
<div class="pricing-period">per month</div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> 100 AI Music Tracks</li>
<li><i class="fas fa-check"></i> All Generation Features</li>
<li><i class="fas fa-check"></i> Vocal Removal</li>
<li><i class="fas fa-check"></i> Music Video Generation</li>
<li><i class="fas fa-check"></i> Priority Support</li>
<li><i class="fas fa-check"></i> High Quality Output</li>
</ul>
<a href="#create" class="btn btn-primary">Get Started</a>
</div>
<div class="pricing-card">
<h3 class="pricing-title">Professional</h3>
<div class="pricing-price">$199</div>
<div class="pricing-period">per month</div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> Unlimited Tracks</li>
<li><i class="fas fa-check"></i> All Features Included</li>
<li><i class="fas fa-check"></i> Custom Branding</li>
<li><i class="fas fa-check"></i> API Access</li>
<li><i class="fas fa-check"></i> Dedicated Support</li>
<li><i class="fas fa-check"></i> Highest Quality</li>
</ul>
<a href="#create" class="btn btn-primary">Get Started</a>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta">
<div class="container">
<div class="cta-content">
<h2 class="cta-title">Ready to Create Amazing Music?</h2>
<p class="cta-description">Join thousands of creators who trust SoundStudioPro to generate professional music for their projects.</p>
<a href="#create" class="btn btn-primary">🎵 Start Creating Now</a>
</div>
</div>
</section>
<script>
// Check if user is logged in
<?php
if (!isset($_SESSION['user_id'])) {
// echo "window.location.href = '/auth/login.php';"; // Redirect disabled
}
?>
// Secure API Configuration (no sensitive data exposed)
const API_ENDPOINT = window.location.protocol + '//' + window.location.host + '/api.php';
// DOM Elements
const musicForm = document.getElementById('musicForm');
const createBtn = document.getElementById('createBtn');
const loading = document.getElementById('loading');
const results = document.getElementById('results');
const audioElement = document.getElementById('audioElement');
const downloadBtn = document.getElementById('downloadBtn');
// Form submission handler
musicForm.addEventListener('submit', async (e) => {
e.preventDefault();
// Check if user is logged in (client-side check)
<?php if (!isset($_SESSION['user_id'])): ?>
alert('Please log in to create music.');
window.location.href = 'auth/login.php';
return;
<?php endif; ?>
const title = document.getElementById('title').value;
const prompt = document.getElementById('prompt').value;
const modelVersion = document.getElementById('modelVersion').value;
const duration = document.getElementById('duration').value;
// Show loading
createBtn.disabled = true;
loading.style.display = 'block';
results.style.display = 'none';
try {
// Prepare request data
const requestData = {
type: 'music',
title: title,
prompt: prompt,
model: modelVersion,
duration: parseInt(duration)
};
console.log('Sending request:', requestData);
// Make API request
const response = await fetch(API_ENDPOINT, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(requestData)
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const responseText = await response.text();
console.log('Raw response:', responseText);
let result;
try {
result = JSON.parse(responseText);
} catch (parseError) {
console.error('JSON parse error:', parseError);
console.error('Response text:', responseText);
throw new Error('Invalid JSON response from server: ' + responseText.substring(0, 100));
}
if (!result.success) {
throw new Error(result.error || 'Unknown error occurred');
}
// Check if this is a processing response (callback-based)
if (result.data && result.data.status === 'processing' && result.data.taskId) {
// Start polling for results
pollForResults(result.data.taskId);
} else {
// Direct result (for non-callback operations)
displayResults(result.data);
}
} catch (fetchError) {
if (fetchError.name === 'AbortError') {
throw new Error('Request timed out. Music generation takes 2-3 minutes. Please try again.');
}
throw fetchError;
}
} catch (error) {
console.error('Error creating music:', error);
console.error('Error details:', error);
// More detailed error handling
let errorMessage = 'Error creating music: ';
if (error.message) {
errorMessage += error.message;
} else if (error.toString) {
errorMessage += error.toString();
} else {
errorMessage += 'Unknown error occurred';
}
alert(errorMessage);
} finally {
// Hide loading
createBtn.disabled = false;
loading.style.display = 'none';
}
});
// Poll for task results
async function pollForResults(taskId) {
const maxAttempts = 60; // 5 minutes with 5-second intervals
let attempts = 0;
const pollInterval = setInterval(async () => {
attempts++;
try {
const response = await fetch(`/get_result.php?taskId=${taskId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result.success && result.status === 'complete') {
clearInterval(pollInterval);
displayResults(result.data);
createBtn.disabled = false;
loading.style.display = 'none';
} else if (result.success && result.status === 'processing') {
// Update loading message
const loadingText = document.querySelector('#loading p');
if (loadingText) {
loadingText.textContent = `Creating your music... This may take 2-3 minutes. (Attempt ${attempts}/${maxAttempts})`;
}
// Check if we've exceeded max attempts
if (attempts >= maxAttempts) {
clearInterval(pollInterval);
throw new Error('Music generation timed out. Please try again.');
}
} else {
throw new Error(result.error || 'Unknown error occurred');
}
} catch (error) {
clearInterval(pollInterval);
console.error('Polling error:', error);
alert('Error checking music status: ' + error.message);
createBtn.disabled = false;
loading.style.display = 'none';
}
}, 5000); // Poll every 5 seconds
}
// Display results
function displayResults(data) {
results.style.display = 'block';
console.log('Displaying results:', data);
// Handle api.box callback data format
if (data && data.audio_url) {
audioElement.src = data.audio_url;
downloadBtn.href = data.audio_url;
downloadBtn.download = 'soundstudiopro-creation.mp3';
} else if (data && data.data && data.data.audio_url) {
// Nested data format from callback
audioElement.src = data.data.audio_url;
downloadBtn.href = data.data.audio_url;
downloadBtn.download = 'soundstudiopro-creation.mp3';
} else if (data && data.lyrics) {
// For lyrics, display text instead of audio
const audioPlayer = document.getElementById('audioPlayer');
audioPlayer.innerHTML = `
<div style="color: var(--text-primary); text-align: center; padding: 2rem;">
<h4 style="margin-bottom: 1rem;">Generated Lyrics:</h4>
<p style="white-space: pre-wrap; line-height: 1.6;">${data.lyrics}</p>
</div>
`;
} else if (data && data.video_url) {
// For music videos
const audioPlayer = document.getElementById('audioPlayer');
audioPlayer.innerHTML = `
<div style="color: var(--text-primary); text-align: center; padding: 2rem;">
<h4 style="margin-bottom: 1rem;">Generated Music Video:</h4>
<video controls style="width: 100%; max-width: 500px; border-radius: 12px;">
<source src="${data.video_url}" type="video/mp4">
Your browser does not support the video tag.
</video>
<div style="margin-top: 2rem;">
<a href="${data.video_url}" class="download-btn" download="musicstudio-video.mp4">
<i class="fas fa-download"></i> Download Video
</a>
</div>
</div>
`;
} else {
// Fallback for other types
const audioPlayer = document.getElementById('audioPlayer');
audioPlayer.innerHTML = `
<div style="color: var(--text-primary); text-align: center; padding: 2rem;">
<h4 style="margin-bottom: 1rem;">Processing Complete!</h4>
<p>Your music has been generated successfully.</p>
<p style="font-size: 1.4rem; color: var(--text-secondary); margin-top: 1rem;">Check the console for detailed response data.</p>
</div>
`;
console.log('API Response:', data);
}
}
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Add some interactive effects
document.addEventListener('DOMContentLoaded', function() {
// Add parallax effect to hero section
window.addEventListener('scroll', function() {
const scrolled = window.pageYOffset;
const hero = document.querySelector('.hero');
if (hero) {
hero.style.transform = `translateY(${scrolled * 0.5}px)`;
}
});
// Add typing effect to hero title
const heroTitle = document.querySelector('.hero-title');
if (heroTitle) {
const text = heroTitle.textContent;
heroTitle.textContent = '';
let i = 0;
const typeWriter = () => {
if (i < text.length) {
heroTitle.textContent += text.charAt(i);
i++;
setTimeout(typeWriter, 50);
}
};
setTimeout(typeWriter, 1000);
}
});
</script>
<!-- Winamp-style Bottom Music Player -->
<div id="musicPlayer" class="music-player">
<div class="player-header">
<div class="player-info">
<span id="currentTrack">No track playing</span>
<span id="currentArtist">-</span>
</div>
<div class="player-controls">
<button id="prevBtn" class="control-btn"><i class="fas fa-step-backward"></i></button>
<button id="playPauseBtn" class="control-btn"><i class="fas fa-play"></i></button>
<button id="nextBtn" class="control-btn"><i class="fas fa-step-forward"></i></button>
<button id="playlistBtn" class="control-btn"><i class="fas fa-list"></i></button>
</div>
</div>
<div class="player-body">
<div class="progress-container">
<div class="progress-bar">
<div id="progress" class="progress-fill"></div>
</div>
<div class="time-display">
<span id="currentTime">0:00</span>
<span id="totalTime">0:00</span>
</div>
</div>
<div class="volume-container">
<i class="fas fa-volume-up"></i>
<input type="range" id="volumeSlider" min="0" max="100" value="50">
</div>
</div>
<!-- Playlist Panel -->
<div id="playlistPanel" class="playlist-panel">
<div class="playlist-header">
<h3>Playlist</h3>
<button id="closePlaylist" class="close-btn"><i class="fas fa-times"></i></button>
</div>
<div class="playlist-content">
<div id="playlistItems"></div>
</div>
</div>
</div>
<style>
/* Music Player Styles */
.music-player {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--bg-secondary);
border-top: 2px solid var(--glow-accent);
backdrop-filter: blur(20px);
z-index: 1000;
padding: 1rem 2rem;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}
.player-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.player-info {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.player-info span:first-child {
color: var(--text-primary);
font-weight: 600;
font-size: 1.4rem;
}
.player-info span:last-child {
color: var(--text-secondary);
font-size: 1.2rem;
}
.player-controls {
display: flex;
gap: 1rem;
align-items: center;
}
.control-btn {
background: var(--bg-card);
border: 1px solid var(--border-medium);
color: var(--text-primary);
padding: 0.8rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.2rem;
}
.control-btn:hover {
background: var(--glow-accent);
border-color: var(--glow-primary);
transform: translateY(-2px);
}
.player-body {
display: flex;
align-items: center;
gap: 2rem;
}
.progress-container {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.progress-bar { background: var(--border-light);
border-radius: 3px;
overflow: hidden;
cursor: pointer;
}
.progress-fill { background: var(--primary-gradient);
width: 0%;
transition: width 0.1s ease;
}
.time-display {
display: flex;
justify-content: space-between;
font-size: 1.2rem;
color: var(--text-secondary);
}
.volume-container {
display: flex;
align-items: center;
gap: 1rem;
color: var(--text-secondary);
}
.volume-container input[type="range"] {
width: 100px;
height: 4px;
background: var(--bg-card);
border-radius: 2px;
outline: none;
cursor: pointer;
}
.volume-container input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 16px;
height: 16px;
background: var(--text-accent);
border-radius: 50%;
cursor: pointer;
}
/* Playlist Panel */
.playlist-panel {
position: fixed;
bottom: 100px;
right: 2rem;
width: 400px;
max-height: 500px;
background: var(--bg-secondary);
border: 1px solid var(--bg-card);
border-radius: 16px;
backdrop-filter: blur(20px);
z-index: 1001;
display: none;
box-shadow: var(--shadow-medium);
}
.playlist-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
border-bottom: 1px solid var(--bg-card);
}
.playlist-header h3 {
color: var(--text-primary);
font-size: 1.8rem;
font-weight: 600;
}
.close-btn {
background: none;
border: none;
color: var(--text-secondary);
font-size: 1.6rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 4px;
transition: all 0.3s ease;
}
.close-btn:hover {
color: var(--text-primary);
background: var(--bg-card);
}
.playlist-content {
max-height: 400px;
overflow-y: auto;
padding: 1rem;
}
.playlist-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 0.5rem;
}
.playlist-item:hover {
background: var(--bg-card);
}
.playlist-item.active {
background: var(--shadow-medium);
border: 1px solid var(--glow-accent);
}
.playlist-item-info {
flex: 1;
}
.playlist-item-title {
color: var(--text-primary);
font-weight: 600;
font-size: 1.4rem;
margin-bottom: 0.2rem;
}
.playlist-item-artist {
color: var(--text-secondary);
font-size: 1.2rem;
}
.playlist-item-duration {
color: var(--text-secondary);
font-size: 1.2rem;
}
/* Responsive */
@media (max-width: 768px) {
.music-player {
padding: 1rem;
}
.player-header {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.player-body {
flex-direction: column;
gap: 1rem;
}
.playlist-panel {
width: calc(100vw - 2rem);
right: 1rem;
left: 1rem;
}
}
</style>
<script>
// Music Player Functionality
let currentAudio = null;
let playlist = [];
let currentTrackIndex = 0;
let isPlaying = false;
// DOM Elements
const playPauseBtn = document.getElementById('playPauseBtn');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const playlistBtn = document.getElementById('playlistBtn');
const closePlaylist = document.getElementById('closePlaylist');
const playlistPanel = document.getElementById('playlistPanel');
const progressBar = document.getElementById('progress');
const progressContainer = document.querySelector('.progress-bar');
const currentTimeSpan = document.getElementById('currentTime');
const totalTimeSpan = document.getElementById('totalTime');
const volumeSlider = document.getElementById('volumeSlider');
const currentTrackSpan = document.getElementById('currentTrack');
const currentArtistSpan = document.getElementById('currentArtist');
const playlistItems = document.getElementById('playlistItems');
// Event Listeners
playPauseBtn.addEventListener('click', togglePlayPause);
prevBtn.addEventListener('click', playPrevious);
nextBtn.addEventListener('click', playNext);
playlistBtn.addEventListener('click', togglePlaylist);
closePlaylist.addEventListener('click', togglePlaylist);
progressContainer.addEventListener('click', seek);
volumeSlider.addEventListener('input', updateVolume);
// Functions
function playTrack(audioUrl, title, artist) {
if (currentAudio) {
currentAudio.pause();
}
currentAudio = new Audio(audioUrl);
currentAudio.volume = volumeSlider.value / 100;
currentAudio.addEventListener('loadedmetadata', () => {
totalTimeSpan.textContent = formatTime(currentAudio.duration);
});
currentAudio.addEventListener('timeupdate', () => {
const progress = (currentAudio.currentTime / currentAudio.duration) * 100;
progressBar.style.width = progress + '%';
currentTimeSpan.textContent = formatTime(currentAudio.currentTime);
});
currentAudio.addEventListener('ended', playNext);
currentTrackSpan.textContent = title;
currentArtistSpan.textContent = artist;
currentAudio.play();
isPlaying = true;
updatePlayPauseButton();
// Add to playlist if not already there
const track = { url: audioUrl, title, artist };
if (!playlist.find(t => t.url === audioUrl)) {
playlist.push(track);
updatePlaylist();
}
}
function togglePlayPause() {
if (!currentAudio) return;
if (isPlaying) {
currentAudio.pause();
isPlaying = false;
} else {
currentAudio.play();
isPlaying = true;
}
updatePlayPauseButton();
}
function updatePlayPauseButton() {
const icon = playPauseBtn.querySelector('i');
icon.className = isPlaying ? 'fas fa-pause' : 'fas fa-play';
}
function playPrevious() {
if (playlist.length === 0) return;
currentTrackIndex = (currentTrackIndex - 1 + playlist.length) % playlist.length;
const track = playlist[currentTrackIndex];
playTrack(track.url, track.title, track.artist);
}
function playNext() {
if (playlist.length === 0) return;
currentTrackIndex = (currentTrackIndex + 1) % playlist.length;
const track = playlist[currentTrackIndex];
playTrack(track.url, track.title, track.artist);
}
function seek(e) {
if (!currentAudio) return;
const rect = progressContainer.getBoundingClientRect();
const percent = (e.clientX - rect.left) / rect.width;
currentAudio.currentTime = percent * currentAudio.duration;
}
function updateVolume() {
if (currentAudio) {
currentAudio.volume = volumeSlider.value / 100;
}
}
function togglePlaylist() {
playlistPanel.style.display = playlistPanel.style.display === 'none' ? 'block' : 'none';
}
function updatePlaylist() {
playlistItems.innerHTML = '';
playlist.forEach((track, index) => {
const item = document.createElement('div');
item.className = `playlist-item ${index === currentTrackIndex ? 'active' : ''}`;
item.innerHTML = `
<div class="playlist-item-info">
<div class="playlist-item-title">${track.title}</div>
<div class="playlist-item-artist">${track.artist}</div>
</div>
`;
item.addEventListener('click', () => {
currentTrackIndex = index;
playTrack(track.url, track.title, track.artist);
});
playlistItems.appendChild(item);
});
}
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
// Make playTrack function globally available
window.playTrack = playTrack;
</script>
<?php include 'includes/footer.php'; ?>