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
223 lines
6.7 KiB
HTML
223 lines
6.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;
|
|
}
|
|
.audio-container {
|
|
margin: 20px 0;
|
|
}
|
|
audio {
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Audio Player Test</h1>
|
|
|
|
<div class="test-case">
|
|
<h2>Test 1: Direct Audio Element</h2>
|
|
<div class="audio-container">
|
|
<audio id="direct-audio" controls>
|
|
<source src="/audio/devuser/stream.opus" type="audio/ogg; codecs=opus">
|
|
Your browser does not support the audio element.
|
|
</audio>
|
|
</div>
|
|
<div>
|
|
<button onclick="document.getElementById('direct-audio').play()">Play</button>
|
|
<button onclick="document.getElementById('direct-audio').pause()">Pause</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h2>Test 2: Dynamic Audio Element</h2>
|
|
<div id="dynamic-audio-container">
|
|
<button onclick="setupDynamicAudio()">Initialize Dynamic Audio</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h2>Test 3: Using loadProfileStream</h2>
|
|
<div id="load-profile-container">
|
|
<button onclick="testLoadProfileStream()">Test loadProfileStream</button>
|
|
<div id="test3-status">Not started</div>
|
|
<div class="audio-container">
|
|
<audio id="profile-audio" controls></audio>
|
|
</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 setupDynamicAudio() {
|
|
log('Setting up dynamic audio element...');
|
|
const container = document.getElementById('dynamic-audio-container');
|
|
container.innerHTML = '';
|
|
|
|
try {
|
|
const audio = document.createElement('audio');
|
|
audio.controls = true;
|
|
audio.preload = 'auto';
|
|
audio.crossOrigin = 'anonymous';
|
|
|
|
const source = document.createElement('source');
|
|
source.src = '/audio/devuser/stream.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 {
|
|
// Import the loadProfileStream function from app.js
|
|
const { loadProfileStream } = await import('./app.js');
|
|
|
|
if (typeof loadProfileStream !== 'function') {
|
|
throw new Error('loadProfileStream function not found');
|
|
}
|
|
|
|
// Call loadProfileStream with test user
|
|
const audio = await loadProfileStream('devuser');
|
|
|
|
if (audio) {
|
|
status.textContent = 'Audio loaded successfully!';
|
|
status.className = 'success';
|
|
log('Audio loaded successfully', 'success');
|
|
|
|
// Add the audio element to the page
|
|
const audioContainer = document.querySelector('#load-profile-container .audio-container');
|
|
audioContainer.innerHTML = '';
|
|
audio.controls = true;
|
|
audioContainer.appendChild(audio);
|
|
} 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');
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
// 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();
|
|
|
|
// Log audio element events for debugging
|
|
const audioElements = document.getElementsByTagName('audio');
|
|
Array.from(audioElements).forEach((audio, index) => {
|
|
['play', 'pause', 'error', 'stalled', 'suspend', 'abort', 'emptied', 'ended'].forEach(event => {
|
|
audio.addEventListener(event, (e) => {
|
|
log(`Audio ${index + 1} ${event} event: ${e.type}`);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|