17616ac5b8
- Add Alembic for database migrations - Implement user authentication system - Update frontend styles and components - Add new test audio functionality - Update stream management and UI
193 lines
5.7 KiB
HTML
193 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Audio Player Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
.test-case {
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
.success { color: green; }
|
|
.error { color: red; }
|
|
button {
|
|
padding: 8px 16px;
|
|
margin: 5px;
|
|
cursor: pointer;
|
|
}
|
|
#log {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
font-family: monospace;
|
|
background: #f5f5f5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Audio Player Test</h1>
|
|
|
|
<div class="test-case">
|
|
<h2>Test 1: Basic Audio Element</h2>
|
|
<audio id="test1" controls>
|
|
<source src="/static/test-audio.opus" type="audio/ogg; codecs=opus">
|
|
Your browser does not support the audio element.
|
|
</audio>
|
|
<div>
|
|
<button onclick="document.getElementById('test1').play()">Play</button>
|
|
<button onclick="document.getElementById('test1').pause()">Pause</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h2>Test 2: Dynamic Audio Element</h2>
|
|
<div id="test2-container">
|
|
<button onclick="setupTest2()">Initialize Audio</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h2>Test 3: Using loadProfileStream</h2>
|
|
<div id="test3-container">
|
|
<button onclick="testLoadProfileStream()">Test loadProfileStream</button>
|
|
<div id="test3-status">Not started</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h2>Browser Audio Support</h2>
|
|
<div id="codec-support">Testing codec support...</div>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h2>Console Log</h2>
|
|
<div id="log"></div>
|
|
<button onclick="document.getElementById('log').innerHTML = ''">Clear Log</button>
|
|
</div>
|
|
|
|
<script>
|
|
// Logging function
|
|
function log(message, type = 'info') {
|
|
const logDiv = document.getElementById('log');
|
|
const entry = document.createElement('div');
|
|
entry.className = type;
|
|
entry.textContent = `[${new Date().toISOString()}] ${message}`;
|
|
logDiv.appendChild(entry);
|
|
logDiv.scrollTop = logDiv.scrollHeight;
|
|
console.log(`[${type.toUpperCase()}] ${message}`);
|
|
}
|
|
|
|
// Test 2: Dynamic Audio Element
|
|
function setupTest2() {
|
|
log('Setting up dynamic audio element...');
|
|
const container = document.getElementById('test2-container');
|
|
container.innerHTML = '';
|
|
|
|
try {
|
|
const audio = document.createElement('audio');
|
|
audio.controls = true;
|
|
audio.preload = 'auto';
|
|
|
|
const source = document.createElement('source');
|
|
source.src = '/static/test-audio.opus';
|
|
source.type = 'audio/ogg; codecs=opus';
|
|
|
|
audio.appendChild(source);
|
|
container.appendChild(audio);
|
|
container.appendChild(document.createElement('br'));
|
|
|
|
const playBtn = document.createElement('button');
|
|
playBtn.textContent = 'Play';
|
|
playBtn.onclick = () => audio.play().catch(e => log(`Play error: ${e}`, 'error'));
|
|
container.appendChild(playBtn);
|
|
|
|
const pauseBtn = document.createElement('button');
|
|
pauseBtn.textContent = 'Pause';
|
|
pauseBtn.onclick = () => audio.pause();
|
|
container.appendChild(pauseBtn);
|
|
|
|
log('Dynamic audio element created successfully');
|
|
} catch (e) {
|
|
log(`Error creating dynamic audio: ${e}`, 'error');
|
|
}
|
|
}
|
|
|
|
// Test 3: loadProfileStream
|
|
async function testLoadProfileStream() {
|
|
const status = document.getElementById('test3-status');
|
|
status.textContent = 'Loading...';
|
|
status.className = '';
|
|
|
|
try {
|
|
// Create a test user ID
|
|
const testUid = 'test-user-' + Math.random().toString(36).substr(2, 8);
|
|
log(`Testing with user: ${testUid}`);
|
|
|
|
// Call loadProfileStream
|
|
const audio = await window.loadProfileStream(testUid);
|
|
|
|
if (audio) {
|
|
status.textContent = 'Audio loaded successfully!';
|
|
status.className = 'success';
|
|
log('Audio loaded successfully', 'success');
|
|
} else {
|
|
status.textContent = 'No audio available for test user';
|
|
status.className = '';
|
|
log('No audio available for test user', 'info');
|
|
}
|
|
} catch (e) {
|
|
status.textContent = `Error: ${e.message}`;
|
|
status.className = 'error';
|
|
log(`Error in loadProfileStream: ${e}`, 'error');
|
|
}
|
|
}
|
|
|
|
// Check browser audio support
|
|
function checkAudioSupport() {
|
|
const supportDiv = document.getElementById('codec-support');
|
|
const audio = document.createElement('audio');
|
|
|
|
const codecs = {
|
|
'audio/ogg; codecs=opus': 'Opus (OGG)',
|
|
'audio/webm; codecs=opus': 'Opus (WebM)',
|
|
'audio/mp4; codecs=mp4a.40.2': 'AAC (MP4)',
|
|
'audio/mpeg': 'MP3'
|
|
};
|
|
|
|
let results = [];
|
|
|
|
for (const [type, name] of Object.entries(codecs)) {
|
|
const canPlay = audio.canPlayType(type);
|
|
results.push(`${name}: ${canPlay || 'Not supported'}`);
|
|
}
|
|
|
|
supportDiv.innerHTML = results.join('<br>');
|
|
}
|
|
|
|
// Initialize tests
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
log('Test page loaded');
|
|
checkAudioSupport();
|
|
|
|
// Expose loadProfileStream for testing
|
|
if (!window.loadProfileStream) {
|
|
log('Warning: loadProfileStream not found in global scope', 'warning');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|