lelo/bethaus-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

attempt to fix timeline out of sync

Browse Source
This commit is contained in:
lelo 2026-01-24 19:08:31 +00:00
parent f12bef5d0c
commit 2a4235aaeb
1 changed files with 30 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
static/audioplayer.js
View File

@ -24,6 +24,8 @@ class SimpleAudioPlayer {
this.rafId = null; this.rafId = null;
this.abortCtrl = null; this.abortCtrl = null;
this._hasMetadata = false; this._hasMetadata = false;
this._posInterval = null;
this._posIntervalMs = 1000;
// Pre-compute icons once // Pre-compute icons once
const fill = getComputedStyle(document.documentElement) const fill = getComputedStyle(document.documentElement)
@ -87,6 +89,21 @@ class SimpleAudioPlayer {
</svg>`; </svg>`;
} }
_startPositionSync() {
if (this._posInterval) return;
this._posInterval = setInterval(() => {
if (!this.audio.paused) {
this._pushPositionState();
}
}, this._posIntervalMs);
}
_stopPositionSync() {
if (!this._posInterval) return;
clearInterval(this._posInterval);
this._posInterval = null;
}
_bindEvents() { _bindEvents() {
this.playBtn.addEventListener('click', () => this.togglePlay()); this.playBtn.addEventListener('click', () => this.togglePlay());
if (this.minBtn) { if (this.minBtn) {
@ -95,6 +112,7 @@ class SimpleAudioPlayer {
this.audio.addEventListener('loadstart', () => { this.audio.addEventListener('loadstart', () => {
this._hasMetadata = false; this._hasMetadata = false;
this._stopPositionSync();
this.timeline.min = 0; this.timeline.min = 0;
this.timeline.max = 0; this.timeline.max = 0;
this.timeline.value = 0; this.timeline.value = 0;
@ -114,6 +132,7 @@ class SimpleAudioPlayer {
this.audio.addEventListener('play', () => { this.audio.addEventListener('play', () => {
this._updatePlayState(); this._updatePlayState();
this._pushPositionState(true); this._pushPositionState(true);
this._startPositionSync();
}); });
this.audio.addEventListener('playing', () => this._pushPositionState(true)); this.audio.addEventListener('playing', () => this._pushPositionState(true));
@ -121,12 +140,14 @@ class SimpleAudioPlayer {
this.audio.addEventListener('pause', () => { this.audio.addEventListener('pause', () => {
this._updatePlayState(); this._updatePlayState();
this._pushPositionState(true); this._pushPositionState(true);
this._stopPositionSync();
}); });
this.audio.addEventListener('ratechange', () => this._pushPositionState(true)); this.audio.addEventListener('ratechange', () => this._pushPositionState(true));
this.audio.addEventListener('ended', () => { this.audio.addEventListener('ended', () => {
this.playBtn.innerHTML = this.icons.play; this.playBtn.innerHTML = this.icons.play;
this._pushPositionState(true); this._pushPositionState(true);
this._stopPositionSync();
if ('mediaSession' in navigator) navigator.mediaSession.playbackState = 'paused'; if ('mediaSession' in navigator) navigator.mediaSession.playbackState = 'paused';
}); });
@ -134,7 +155,15 @@ class SimpleAudioPlayer {
this.audio.addEventListener('timeupdate', () => this.updateTimeline()); this.audio.addEventListener('timeupdate', () => this.updateTimeline());
// Keep position in sync when page visibility changes // Keep position in sync when page visibility changes
document.addEventListener('visibilitychange', () => this._pushPositionState(true)); document.addEventListener('visibilitychange', () => {
this._pushPositionState(true);
if (document.visibilityState === 'visible' && !this.audio.paused) {
this._startPositionSync();
}
});
window.addEventListener('pageshow', () => this._pushPositionState(true));
window.addEventListener('focus', () => this._pushPositionState(true));
// Unified seek input // Unified seek input
this.timeline.addEventListener('input', () => { this.timeline.addEventListener('input', () => {