cottongin/cassette-player
cottongin/cassette-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 6 Activity

background tweaks, CPU spike fix

Browse Source
This commit is contained in:
cottongin 2026-01-17 13:37:46 -05:00
parent d30d6f28d7
commit 8a0e586ec1
No known key found for this signature in database
GPG Key ID: 0ECC91FE4655C262
1 changed files with 43 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
index.html
View File

@ -49,7 +49,7 @@
background-position: center;
background-repeat: repeat;
pointer-events: none;
opacity: 0.33;
opacity: 0.20;
mix-blend-mode: normal;
}
@ -258,19 +258,6 @@
}
*/
.cassette::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="grime"><feTurbulence type="fractalNoise" baseFrequency="3" numOctaves="4" /></filter><rect width="100" height="100" filter="url(%23grime)" opacity="0.15"/></svg>');
pointer-events: none;
border-radius: 4px;
mix-blend-mode: multiply;
}
.cassette-label {
background: linear-gradient(180deg, #d0d0d0 0%, #a0a0a0 100%);
@ -690,20 +677,6 @@
pointer-events: auto;
}
/* Noise texture overlay for worn appearance */
.alby-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="2.5" numOctaves="6" /></filter><rect width="200" height="200" filter="url(%23noise)" opacity="0.4"/></svg>');
pointer-events: none;
opacity: 0.5;
mix-blend-mode: overlay;
}
/* Panel header with amber Lightning accent */
.alby-panel-header {
@ -1201,7 +1174,7 @@
<!-- ALBY LIGHTNING PANEL - END -->
<audio id="audio"></audio>
<audio id="audio" preload="metadata"></audio>
<script>
const playlist = [
@ -1256,9 +1229,29 @@
for (let i = 0; i < playlist.length; i++) {
try {
const duration = await getTrackDuration(playlist[i].url);
trackDurations[i] = duration;
console.log(`Track ${i + 1} duration: ${formatTime(duration)}`);
// For track 0, use the main audio element since loadTrack(0) already loads it
if (i === 0 && currentTrack === 0) {
// Wait for main audio to load metadata if not already
if (audio.duration && !isNaN(audio.duration)) {
trackDurations[i] = audio.duration;
} else {
// Wait for main audio metadata
trackDurations[i] = await new Promise((resolve) => {
if (audio.duration && !isNaN(audio.duration)) {
resolve(audio.duration);
} else {
audio.addEventListener('loadedmetadata', function onMeta() {
audio.removeEventListener('loadedmetadata', onMeta);
resolve(audio.duration);
});
}
});
}
} else {
// For other tracks, use temp audio element
trackDurations[i] = await getTrackDuration(playlist[i].url);
}
console.log(`Track ${i + 1} duration: ${formatTime(trackDurations[i])}`);
} catch (e) {
console.warn(`Failed to get duration for track ${i + 1}, using fallback`);
trackDurations[i] = 240; // 4 minute fallback
@ -1292,24 +1285,35 @@
const tempAudio = new Audio();
tempAudio.preload = 'metadata'; // Only fetch headers, not entire file
// Cleanup function to properly abort any ongoing request
function cleanup() {
tempAudio.removeEventListener('loadedmetadata', onMetadata);
tempAudio.removeEventListener('error', onError);
tempAudio.src = '';
tempAudio.load(); // Force abort of any pending request
}
// Set timeout for slow loads
const timeout = setTimeout(() => {
tempAudio.src = '';
cleanup();
reject(new Error('Timeout loading metadata'));
}, 10000); // 10 second timeout
tempAudio.addEventListener('loadedmetadata', () => {
function onMetadata() {
clearTimeout(timeout);
const duration = tempAudio.duration;
tempAudio.src = ''; // Clean up
cleanup();
resolve(duration);
});
}
tempAudio.addEventListener('error', (e) => {
function onError(e) {
clearTimeout(timeout);
tempAudio.src = '';
cleanup();
reject(e);
});
}
tempAudio.addEventListener('loadedmetadata', onMetadata);
tempAudio.addEventListener('error', onError);
// Direct URL - browser handles caching via HTTP headers
tempAudio.src = url;