Beispiel:Karaoke-3.html
Aus SELFHTML-Wiki
<!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>
<h1>🎤 Scarborough Fair</h1>
</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">
<p class="part">1.</p>
<p class="line" data-time=".5"><ruby>Are<rt>Am</rt></ruby> you going to <ruby>Scarborough<rt>G</rt></ruby> <ruby>Fair?<rt>Am</rt></ruby></p>
<p class="line" data-time="4.5"><ruby> <rt>C</rt></ruby>Parsley, <ruby>sage<rt>Am</rt></ruby>, rose-<ruby>mary<rt>D</rt></ruby> and <ruby>thyme,<rt>Am</rt></ruby></p>
<p class="line" data-time="9.5">Remember <ruby>me<rt>C</rt></ruby> to one who lives <ruby>there,<rt>G</rt></ruby></p>
<p class="line" data-time="15.5"><ruby>She<rt>Am</rt></ruby> once <ruby>was<rt>G</rt></ruby> a true love of <ruby>mine.<rt>Am</rt></ruby></p>
<p class="part">2.</p>
<p class="line" data-time="23.5"><ruby>Tell<rt>Am</rt></ruby> her to make me a <ruby>cambric<rt>G</rt></ruby> <ruby>shirt,<rt>Am</rt></ruby></p>
<p class="line" data-time="28.5"><ruby> <rt>C</rt></ruby>Parsley, <ruby>sage<rt>Am</rt></ruby>, rose-<ruby>mary<rt>D</rt></ruby> and <ruby>thyme,<rt>Am</rt></ruby></p>
<p class="line" data-time="33.5">Without no <ruby>seams<rt>C</rt></ruby> nor needle-<ruby>work,<rt>G</rt></ruby></p>
<p class="line" data-time="38.5"><ruby>Then<rt>Am</rt></ruby> she'll <ruby>be<rt>G</rt></ruby> a true love of <ruby>mine.<rt>Am</rt></ruby></p>
<p class="part">3.</p>
<p class="line" data-time="47.5"><ruby>Tell<rt>Am</rt></ruby> her to find me an <ruby>acre<rt>G</rt></ruby> of <ruby>land,<rt>Am</rt></ruby></p>
<p class="line" data-time="52.5"><ruby> <rt>C</rt></ruby>Parsley, <ruby>sage<rt>Am</rt></ruby>, rose-<ruby>mary<rt>D</rt></ruby> and <ruby>thyme,<rt>Am</rt></ruby></p>
<p class="line" data-time="57.5">Between the salt <ruby>water<rt>C</rt></ruby> and the sea <ruby>strands,<rt>G</rt></ruby></p>
<p class="line" data-time="62.5"><ruby>Then<rt>Am</rt></ruby> she'll <ruby>be<rt>G</rt></ruby> a true love of <ruby>mine.<rt>Am</rt></ruby></p>
<p class="part">4.</p>
<p class="line" data-time="71"><ruby>Tell<rt>Am</rt></ruby> her to plough it with a <ruby>sickle<rt>G</rt></ruby> of <ruby>leather,<rt>Am</rt></ruby></p>
<p class="line" data-time="76"><ruby> <rt>C</rt></ruby>Parsley, <ruby>sage<rt>Am</rt></ruby>, rose-<ruby>mary<rt>D</rt></ruby> and <ruby>thyme,<rt>Am</rt></ruby></p>
<p class="line" data-time="81">And bind it <ruby>all<rt>C</rt></ruby> with a bunch of <ruby>heather,<rt>G</rt></ruby></p>
<p class="line" data-time="86"><ruby>Then<rt>Am</rt></ruby> she'll <ruby>be<rt>G</rt></ruby> a true love of <ruby>mine.<rt>Am</rt></ruby></p>
<p class="part">5. (1. Strophe wiederholen)</p>
<p class="line" data-time="95"><ruby>Are<rt>Am</rt></ruby> you going to <ruby>Scarborough<rt>G</rt></ruby> <ruby>Fair?<rt>Am</rt></ruby></p>
<p class="line" data-time="100"><ruby> <rt>C</rt></ruby>Parsley, <ruby>sage<rt>Am</rt></ruby>, rose-<ruby>mary<rt>D</rt></ruby> and <ruby>thyme,<rt>Am</rt></ruby></p>
<p class="line" data-time="105">Remember <ruby>me<rt>C</rt></ruby> to the one who lives <ruby>there,<rt>G</rt></ruby></p>
<p class="line" data-time="110"><ruby>She<rt>Am</rt></ruby> once <ruby>was<rt>G</rt></ruby> a true love of <ruby>mine.<rt>Am</rt></ruby></p>
</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>
