Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
Beispiel:Karaoke-3.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<title>Scarborough Fair – Liedtext mit Akkorden</title>
<style>
body {
font-family: sans-serif;
max-width: 60em;
margin: 0 auto;
}
audio {
width: 100%;
position: sticky;
top: 0;
z-index: 10;
background: white;
padding: 0.5em 0;
}
.lyrics {
font-size: 1.2em;
line-height: 2.3;
margin-bottom: 3em;
}
.part {
margin: 0;
color: #2f6fed;
font-weight: bold;
}
.line {
margin: 0;
padding: .2em 1em;
opacity: .5;
scroll-margin: 40vh;
transition: background-color .18s ease, opacity .18s ease, transform .18s ease;
}
.line.active {
opacity: 1;
background: #fff27a;
transform: scale(1.01);
}
ruby {
ruby-position: over;
margin-right: .2em;
}
rt {
font-size: .78em;
color: #d04a3a;
font-weight: 700;
letter-spacing: .02em;
}
</style>
</head> <body>
<header>
🎤 Scarborough Fair
</header>
<audio id="player" controls> <source src="/images/c/c8/Scarborough_Fair.mp3" type="audio/mpeg"> Dein Browser unterstützt das Audio-Element nicht. </audio>
<section class="lyrics">
1.
Are you going to Scarborough Fair?
Parsley, sage, rose-mary and thyme,
Remember me to one who lives there,
She once was a true love of mine.
2.
Tell her to make me a cambric shirt,
Parsley, sage, rose-mary and thyme,
Without no seams nor needle-work,
Then she'll be a true love of mine.
3.
Tell her to find me an acre of land,
Parsley, sage, rose-mary and thyme,
Between the salt water and the sea strands,
Then she'll be a true love of mine.
4.
Tell her to plough it with a sickle of leather,
Parsley, sage, rose-mary and thyme,
And bind it all with a bunch of heather,
Then she'll be a true love of mine.
5. (1. Strophe wiederholen)
Are you going to Scarborough Fair?
Parsley, sage, rose-mary and thyme,
Remember me to the one who lives there,
She once was a true love of mine.
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
const audio = document.getElementById('player');
const lines = Array.from(document.querySelectorAll('.line'));
const times = lines.map(line => parseFloat(line.dataset.time));
let activeIndex = -1;
function findActiveIndex(currentTime) {
for (let i = times.length - 1; i >= 0; i--) {
if (currentTime >= times[i]) return i;
}
return -1;
}
function updateLyrics() {
const newIndex = findActiveIndex(audio.currentTime);
if (newIndex === activeIndex) return;
if (activeIndex >= 0) lines[activeIndex].classList.remove('active');
if (newIndex >= 0) {
lines[newIndex].classList.add('active');
lines[newIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
}
activeIndex = newIndex;
}
audio.addEventListener('timeupdate', updateLyrics);
audio.addEventListener('seeked', updateLyrics);
audio.addEventListener('play', updateLyrics);
updateLyrics();
});
</script>
</body> </html>
