 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/.cursor-server/data/User/History/-2235a89a/ |
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DJ Interface Test - SoundStudioPro</title>
<style>
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #0a0a0a;
color: white;
margin: 0;
padding: 20px;
padding-bottom: 100px; /* Space for global player */
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.test-section {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 30px;
margin: 20px 0;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.test-title {
font-size: 24px;
font-weight: bold;
color: #667eea;
margin-bottom: 20px;
}
.test-description {
color: #a0aec0;
line-height: 1.6;
margin-bottom: 20px;
}
.button {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
margin: 10px;
transition: all 0.3s ease;
}
.button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}
.button.secondary {
background: rgba(102, 126, 234, 0.2);
border: 1px solid rgba(102, 126, 234, 0.3);
}
.track-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 20px;
margin: 15px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.track-info {
flex: 1;
}
.track-title {
font-size: 18px;
font-weight: bold;
color: white;
margin-bottom: 5px;
}
.track-artist {
font-size: 14px;
color: #a0aec0;
margin-bottom: 5px;
}
.track-duration {
font-size: 12px;
color: #667eea;
}
.track-actions {
display: flex;
gap: 10px;
}
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 10px;
}
.status-indicator.ready {
background: #48bb78;
}
.status-indicator.development {
background: #ed8936;
}
.status-indicator.planned {
background: #a0aec0;
}
.feature-list {
list-style: none;
padding: 0;
}
.feature-list li {
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
}
.feature-list li:before {
content: '🎛️';
margin-right: 15px;
font-size: 20px;
}
.instructions {
background: rgba(102, 126, 234, 0.1);
border: 1px solid rgba(102, 126, 234, 0.3);
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.instructions h3 {
color: #667eea;
margin-top: 0;
}
.instructions ol {
color: #a0aec0;
line-height: 1.8;
}
</style>
</head>
<body>
<div class="container">
<h1>🎛️ DJ Interface Test</h1>
<div class="test-section">
<div class="test-title">How to Test the DJ Interface</div>
<div class="test-description">
This page demonstrates the new DJ interface that's been integrated into the global player.
The DJ interface allows you to mix tracks together in real-time with professional controls.
<strong>NEW:</strong> When you open the DJ interface while a track is playing, it automatically loads to Deck A!
</div>
<div class="instructions">
<h3>📋 Testing Instructions:</h3>
<ol>
<li><strong>Play a track first</strong> - Click play on any track below to start the global player</li>
<li><strong>Look for the DJ Interface button</strong> - It's the slider icon (🎛️) in the global player at the bottom of the page</li>
<li><strong>Click the DJ Interface button</strong> - This will open the professional DJ interface</li>
<li><strong>Watch Deck A auto-load</strong> - The currently playing track automatically loads to Deck A!</li>
<li><strong>Test the controls</strong> - Try the play/pause buttons, faders, crossfader, and effects</li>
<li><strong>Mix tracks together</strong> - Load another track to Deck B and use the crossfader to mix between them</li>
</ol>
</div>
</div>
<div class="test-section">
<div class="test-title">🎵 Test Auto-Loading Feature</div>
<div class="test-description">
<strong>NEW FEATURE:</strong> When you open the DJ interface while a track is playing, it automatically loads to Deck A with perfect sync!
</div>
<div style="background: rgba(72, 187, 120, 0.1); border: 1px solid rgba(72, 187, 120, 0.3); padding: 20px; border-radius: 8px; margin: 20px 0;">
<h4 style="color: #48bb78; margin-top: 0;">🚀 How It Works:</h4>
<ol style="color: #a0aec0; line-height: 1.8;">
<li>Play any track below using the global player</li>
<li>While it's playing, click the DJ Interface button (🎛️)</li>
<li>Watch as the track automatically loads to Deck A</li>
<li>The playhead and time display sync perfectly with the global player</li>
<li>You can now mix with other tracks in Deck B!</li>
</ol>
</div>
</div>
<div class="test-section">
<div class="test-title">Sample Tracks</div>
<div class="test-description">
Use these sample tracks to test the DJ interface functionality:
</div>
<div class="track-card">
<div class="track-info">
<div class="track-title">Lounge Lyrics</div>
<div class="track-artist">SoundStudioPro</div>
<div class="track-duration">3:09 • 128 BPM</div>
</div>
<div class="track-actions">
<button class="button" onclick="loadTrackToDeck('A', 'lounge')">Load to Deck A</button>
<button class="button" onclick="loadTrackToDeck('B', 'lounge')">Load to Deck B</button>
</div>
</div>
<div class="track-card">
<div class="track-info">
<div class="track-title">Ambient Electronic</div>
<div class="track-artist">SoundStudioPro</div>
<div class="track-duration">4:00 • 130 BPM</div>
</div>
<div class="track-actions">
<button class="button" onclick="loadTrackToDeck('A', 'ambient')">Load to Deck A</button>
<button class="button" onclick="loadTrackToDeck('B', 'ambient')">Load to Deck B</button>
</div>
</div>
<div class="track-card">
<div class="track-info">
<div class="track-title">Current Global Player Track</div>
<div class="track-artist">From Global Player</div>
<div class="track-duration">Dynamic • Auto-detected BPM</div>
</div>
<div class="track-actions">
<button class="button" onclick="loadCurrentTrackToDeck('A')">Load to Deck A</button>
<button class="button" onclick="loadCurrentTrackToDeck('B')">Load to Deck B</button>
</div>
</div>
</div>
<div class="test-section">
<div class="test-title">DJ Interface Features</div>
<div class="test-description">
The DJ interface includes all the essential features of professional DJ software:
</div>
<ul class="feature-list">
<li><span class="status-indicator ready"></span><strong>Dual Deck System</strong> - Two independent track decks with individual controls</li>
<li><span class="status-indicator ready"></span><strong>Professional Mixer</strong> - 3-band EQ, faders, crossfader, master level meter</li>
<li><span class="status-indicator ready"></span><strong>Real-time Waveforms</strong> - Visual representation of track progress</li>
<li><span class="status-indicator ready"></span><strong>Play/Pause Controls</strong> - Individual control for each deck</li>
<li><span class="status-indicator ready"></span><strong>Cue Points</strong> - Set and jump to specific points in tracks</li>
<li><span class="status-indicator ready"></span><strong>Beat Sync</strong> - Synchronize BPM between tracks</li>
<li><span class="status-indicator ready"></span><strong>Effects</strong> - Filter, Echo, Reverb, Flanger effects</li>
<li><span class="status-indicator development"></span><strong>Real-time Audio Mixing</strong> - Actual audio processing (in development)</li>
<li><span class="status-indicator planned"></span><strong>Mix Recording</strong> - Record and export your mixes</li>
<li><span class="status-indicator planned"></span><strong>Hot Cues & Loops</strong> - Advanced performance features</li>
</ul>
</div>
<div class="test-section">
<div class="test-title">Quick Actions</div>
<div class="test-description">
Test specific DJ interface functions:
</div>
<div style="text-align: center; margin: 20px 0;">
<button class="button" onclick="openDJInterface()">🎛️ Open DJ Interface</button>
<button class="button secondary" onclick="loadSampleTracks()">🎵 Load Sample Tracks</button>
<button class="button secondary" onclick="testSync()">🔗 Test Beat Sync</button>
<button class="button secondary" onclick="testEffects()">✨ Test Effects</button>
<button class="button secondary" onclick="resetDJ()">🔄 Reset DJ Interface</button>
</div>
<div id="autoLoadStatus" style="background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.3); padding: 15px; border-radius: 8px; margin: 20px 0; text-align: center; display: none;">
<div style="color: #667eea; font-weight: bold;">🎛️ Auto-Load Status</div>
<div id="autoLoadStatusText" style="color: #a0aec0; margin-top: 5px;"></div>
</div>
</div>
<div class="test-section">
<div class="test-title">Technical Information</div>
<div class="test-description">
This DJ interface is built using modern web technologies and integrates seamlessly with the existing global player.
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px;">
<div style="background: rgba(102, 126, 234, 0.1); padding: 20px; border-radius: 8px;">
<h4 style="color: #667eea; margin-top: 0;">Frontend</h4>
<ul style="color: #a0aec0; margin: 0; padding-left: 20px;">
<li>HTML5 Canvas for waveforms</li>
<li>CSS3 for professional styling</li>
<li>JavaScript for real-time controls</li>
<li>Responsive design</li>
</ul>
</div>
<div style="background: rgba(102, 126, 234, 0.1); padding: 20px; border-radius: 8px;">
<h4 style="color: #667eea; margin-top: 0;">Audio Processing</h4>
<ul style="color: #a0aec0; margin: 0; padding-left: 20px;">
<li>Web Audio API</li>
<li>Real-time mixing</li>
<li>Effects processing</li>
<li>Beat detection</li>
</ul>
</div>
<div style="background: rgba(102, 126, 234, 0.1); padding: 20px; border-radius: 8px;">
<h4 style="color: #667eea; margin-top: 0;">Integration</h4>
<ul style="color: #a0aec0; margin: 0; padding-left: 20px;">
<li>Global player integration</li>
<li>AJAX navigation compatible</li>
<li>Mobile responsive</li>
<li>Cross-browser support</li>
</ul>
</div>
</div>
</div>
<div class="test-section">
<div class="test-title">Beta Launch Strategy</div>
<div class="test-description">
The DJ interface is currently in beta and available to all users as a promotional feature.
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px;">
<div style="background: rgba(72, 187, 120, 0.1); border: 1px solid rgba(72, 187, 120, 0.3); padding: 20px; border-radius: 8px;">
<h4 style="color: #48bb78; margin-top: 0;">🎉 Beta Phase (Current)</h4>
<ul style="color: #a0aec0; margin: 0; padding-left: 20px;">
<li>Free for all users</li>
<li>Generate excitement</li>
<li>Collect feedback</li>
<li>Test performance</li>
<li>Build user base</li>
</ul>
</div>
<div style="background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.3); padding: 20px; border-radius: 8px;">
<h4 style="color: #667eea; margin-top: 0;">💎 Premium Phase (Future)</h4>
<ul style="color: #a0aec0; margin: 0; padding-left: 20px;">
<li>Pro users: Full access</li>
<li>Free users: Limited features</li>
<li>Premium subscription incentive</li>
<li>Advanced features</li>
<li>Mix recording & export</li>
</ul>
</div>
</div>
</div>
</div>
<script>
// Sample tracks data
const sampleTracks = {
lounge: {
title: "Lounge Lyrics",
artist: "SoundStudioPro",
audioUrl: "https://apiboxfiles.erweima.ai/MTk4YTg3OGYtM2Y4NS00YWJhLWIxMjMtMjk1OWFjOTUwMDFk.mp3",
bpm: 128,
duration: 189
},
ambient: {
title: "Ambient Electronic",
artist: "SoundStudioPro",
audioUrl: "https://apiboxfiles.erweima.ai/MTk4YTg3OGYtM2Y4NS00YWJhLWIxMjMtMjk1OWFjOTUwMDFk.mp3",
bpm: 130,
duration: 240
}
};
// Load track to deck
function loadTrackToDeck(deck, trackKey) {
const track = sampleTracks[trackKey];
if (track && typeof djInterface !== 'undefined') {
djInterface.loadTrackToDeck(deck, track);
console.log(`🎛️ Loaded ${track.title} to Deck ${deck}`);
} else {
console.log('🎛️ DJ Interface not available or track not found');
}
}
// Load current track to deck
function loadCurrentTrackToDeck(deck) {
if (typeof djInterface !== 'undefined') {
djInterface.loadCurrentTrackToDeck(deck);
} else {
console.log('🎛️ DJ Interface not available');
}
}
// Open DJ interface
function openDJInterface() {
if (typeof djInterface !== 'undefined') {
djInterface.toggleDJInterface();
console.log('🎛️ DJ Interface toggled');
} else {
console.log('🎛️ DJ Interface not available');
}
}
// Load sample tracks
function loadSampleTracks() {
if (typeof djInterface !== 'undefined') {
djInterface.loadTrackToDeck('A', sampleTracks.lounge);
djInterface.loadTrackToDeck('B', sampleTracks.ambient);
console.log('🎛️ Sample tracks loaded to both decks');
}
}
// Test sync
function testSync() {
if (typeof djInterface !== 'undefined') {
djInterface.syncTracks();
console.log('🎛️ Beat sync tested');
}
}
// Test effects
function testEffects() {
if (typeof djInterface !== 'undefined') {
djInterface.toggleEffect('filter');
setTimeout(() => djInterface.toggleEffect('echo'), 500);
setTimeout(() => djInterface.toggleEffect('reverb'), 1000);
console.log('🎛️ Effects tested');
}
}
// Reset DJ interface
function resetDJ() {
if (typeof djInterface !== 'undefined') {
// Reset deck states
djInterface.deckA = {
track: null,
isPlaying: false,
currentTime: 0,
duration: 0,
bpm: 128,
cuePoints: [],
loop: null
};
djInterface.deckB = {
track: null,
isPlaying: false,
currentTime: 0,
duration: 0,
bpm: 128,
cuePoints: [],
loop: null
};
// Reset UI
['A', 'B'].forEach(deck => {
const statusElement = document.getElementById(`deck${deck}Status`);
const playButton = document.getElementById(`play${deck}`);
const trackInfo = document.getElementById(`trackInfo${deck}`);
const playhead = document.getElementById(`playhead${deck}`);
if (statusElement) statusElement.textContent = 'STOPPED';
if (statusElement) statusElement.className = 'deck-status stopped';
if (playButton) playButton.textContent = '▶️';
if (trackInfo) trackInfo.innerHTML = '<div class="track-title">No Track Loaded</div><div class="track-artist">-</div><div class="track-time">0:00 / 0:00</div>';
if (playhead) playhead.style.left = '0%';
});
console.log('🎛️ DJ Interface reset');
}
}
// Check if DJ interface is available
window.addEventListener('load', function() {
setTimeout(() => {
if (typeof djInterface !== 'undefined') {
console.log('🎛️ DJ Interface is available');
updateAutoLoadStatus('DJ Interface ready - Auto-load feature active');
} else {
console.log('🎛️ DJ Interface not found - make sure global player is loaded');
updateAutoLoadStatus('DJ Interface not available');
}
}, 2000);
});
// Monitor global player and DJ interface status
function updateAutoLoadStatus(message) {
const statusDiv = document.getElementById('autoLoadStatus');
const statusText = document.getElementById('autoLoadStatusText');
if (statusDiv && statusText) {
statusDiv.style.display = 'block';
statusText.textContent = message;
}
}
// Monitor when tracks are loaded to DJ interface
const originalLoadTrackToDeck = djInterface?.loadTrackToDeck;
if (originalLoadTrackToDeck) {
djInterface.loadTrackToDeck = function(deck, track) {
originalLoadTrackToDeck.call(this, deck, track);
updateAutoLoadStatus(`Track "${track.title}" loaded to Deck ${deck}`);
};
}
// Monitor when DJ interface is opened
const originalToggleDJInterface = djInterface?.toggleDJInterface;
if (originalToggleDJInterface) {
djInterface.toggleDJInterface = function() {
originalToggleDJInterface.call(this);
if (this.isActive) {
updateAutoLoadStatus('DJ Interface opened - checking for current track...');
} else {
updateAutoLoadStatus('DJ Interface closed');
}
};
}
console.log('🎛️ DJ Interface Test Page loaded');
</script>
<!-- Include Global Player with DJ Interface -->
<?php include 'includes/footer.php'; ?>
</body>
</html>