Andrej StevanovskiandClaude Opus 5.5
f067556314
- 'Wie alles angefangen hat' zeigt das echte Schaufenster statt des Pexels-Bilds - Player spielen lied-laden.mp3 (Startseite) und lied-verein.mp3 (Verein): Play/Pause, Fortschrittsregler per Tastatur, kein Autoplay, nichts gespeichert Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
65 lines
2.3 KiB
JavaScript
65 lines
2.3 KiB
JavaScript
/* Emma's Schatzkiste — Lied-Player
|
|
Ein Lied pro Seite (Kundenvorgabe). Kein Autoplay: Ton gibt es nur auf Klick.
|
|
Bewusst OHNE Merken der Abspielposition: das Handoff wollte localStorage, aber jede
|
|
Speicherung auf dem Gerät fällt unter § 25 TDDDG — die Seite verspricht in der
|
|
Datenschutzerklärung, nichts zu speichern, und braucht deshalb kein Banner. */
|
|
(function () {
|
|
function fmt(t) {
|
|
if (!isFinite(t) || t < 0) t = 0;
|
|
var m = Math.floor(t / 60), s = Math.floor(t % 60);
|
|
return m + ':' + (s < 10 ? '0' : '') + s;
|
|
}
|
|
|
|
document.querySelectorAll('[data-song]').forEach(function (box) {
|
|
var audio = box.querySelector('audio');
|
|
var btn = box.querySelector('[data-song-toggle]');
|
|
var seek = box.querySelector('[data-song-seek]');
|
|
var cur = box.querySelector('[data-song-cur]');
|
|
var dur = box.querySelector('[data-song-dur]');
|
|
var title = box.querySelector('h3').textContent;
|
|
var seeking = false;
|
|
|
|
function paint() {
|
|
var d = audio.duration, t = audio.currentTime;
|
|
var p = d ? (t / d) * 100 : 0;
|
|
if (!seeking) seek.value = p;
|
|
seek.style.setProperty('--p', p + '%');
|
|
cur.textContent = fmt(t);
|
|
}
|
|
|
|
audio.addEventListener('loadedmetadata', function () {
|
|
dur.textContent = fmt(audio.duration);
|
|
paint();
|
|
});
|
|
audio.addEventListener('timeupdate', paint);
|
|
audio.addEventListener('play', function () {
|
|
box.classList.add('is-playing');
|
|
btn.setAttribute('aria-label', title + ' pausieren');
|
|
});
|
|
audio.addEventListener('pause', function () {
|
|
box.classList.remove('is-playing');
|
|
btn.setAttribute('aria-label', title + ' abspielen');
|
|
});
|
|
audio.addEventListener('ended', function () {
|
|
audio.currentTime = 0;
|
|
paint();
|
|
});
|
|
|
|
btn.addEventListener('click', function () {
|
|
if (audio.paused) audio.play(); else audio.pause();
|
|
});
|
|
|
|
seek.addEventListener('input', function () {
|
|
seeking = true;
|
|
var d = audio.duration || 0;
|
|
seek.style.setProperty('--p', seek.value + '%');
|
|
cur.textContent = fmt((seek.value / 100) * d);
|
|
});
|
|
seek.addEventListener('change', function () {
|
|
if (audio.duration) audio.currentTime = (seek.value / 100) * audio.duration;
|
|
seeking = false;
|
|
paint();
|
|
});
|
|
});
|
|
})();
|