Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
Beispiel:Karaoke-Boomwhacker.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>Boomwhacker Musical Notation</title> <style>
.C { --bg-color: #f2004d; }
.Cis { --bg-color: #fa4c06; }
.D { --bg-color: #fb8c05; }
.Dis { --bg-color: #face19; }
.E { --bg-color: #f71dfc; }
.F { --bg-color: #cdfd32; }
.Fis { --bg-color: #59fc00; }
.G { --bg-color: #00fb8b; }
.Gis { --bg-color: #008bfa; }
.A { --bg-color: #403ffb; }
.Ais { --bg-color: #a367fd; }
.H { --bg-color: #fc25fc; }
.boomwhacker {
aspect-ratio:1; line-height: 1.25em; text-align:center; border:thin solid; border-radius: 0.25em; padding: 0.25em; margin-bottom:-0.25em;
background-color: var(--bg-color);
} .boomwhacker span { color: var(--bg-color); filter: invert(1) grayscale(1) brightness(1.3) contrast(9000); mix-blend-mode: luminosity; opacity: 0.95; }
.lyrics {
font-size: 1.2em;
line-height: 2.5em;
}
.part {
color: steelblue;
margin: .3em 0;
font-weight: bold;
}
.line {
margin: 0 0 -.2em 0;
padding: .3em 1em 0 1em;
opacity: 1;
}
ruby {
ruby-position: over;
margin: 0 0.2em;
}
rt {
font-size: 0.9em;
color: #f77;
font-weight: bold;
}
@media print {
body {
max-width: 100%;
margin-left: 1cm;
}
audio {
display: none;
}
.lyrics {
font-size: 1em;
line-height: 2.5em;
}
body {
font-family: sans-serif;
max-width: 50em;
margin: 1em auto;
padding: 0 1rem 3rem;
}
audio {
margin: 1em 0;
width: 100%;
}
</style> <script> document.addEventListener('DOMContentLoaded', function () {
const noteMap = {
'C': 'C', 'C#': 'Cis', 'Db': 'Cis', 'D': 'D', 'D#': 'Dis', 'Eb': 'Dis', 'E': 'E', 'F': 'F', 'F#': 'Fis', 'Gb': 'Fis', 'G': 'G', 'G#': 'Gis', 'Ab': 'Gis', 'A': 'A', 'A#': 'Ais', 'Bb': 'Ais', 'B': 'H', 'H': 'H', 'Am': 'A', 'Em': 'E', 'Dm': 'D', // extend as needed
};
document.querySelectorAll('rt').forEach(rt => {
const text = rt.textContent.trim(); const root = text.match(/^[A-H][b#]?/)?.[0]; const cls = noteMap[text] ?? noteMap[root]; if (!cls) return;
rt.classList.add('boomwhacker', cls);
rt.innerHTML = `${rt.textContent}`;
});
}); </script> </head> <body>
Boomwhacker Musical Notation
C C♯ D D♯ E F F♯ G G♯ A A♯ H
Die Textfarbe des spans innerhalb der Boomwhacker-Notation nimmt die Hintergrundfarbe auf und wandelt sie durch CSS-Filter automatisch in eine Schriftfarbe mit hohem Kontrast um.
🎤 Scarborough Fair
<audio controls id="player">
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>
</body> </html>
