Beispiel:Karaoke-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="./Beispiel:Grundlayout.css" media="screen" rel="stylesheet">
<title>Liedtext und Akkorde - 2</title>
<style type="text/css">
body {
font-family: sans-serif;
max-width: 50em;
margin: 1em auto;
padding: 0 1rem 3rem;
}
audio {
margin: 1em 0;
width: 100%;
}
.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,
button {
display: none;
}
.lyrics {
font-size: 1em;
line-height: 2.5em;
}
}
</style>
</head>
<body>
<header>
<h1>🎤 Scarborough Fair <button onclick="window.print()">Seite drucken</button></h1>
</header>
<audio controls="" id="player">
<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"><ruby>Are<rt>Am</rt></ruby> you going to <ruby>Scarborough<rt>G</rt></ruby> <ruby>Fair?<rt>Am</rt></ruby> <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">Remember <ruby>me<rt>C</rt></ruby> to one who lives <ruby>there,<rt>G</rt></ruby> <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"><ruby>Tell<rt>Am</rt></ruby> her to make me a <ruby>cambric<rt>G</rt></ruby> <ruby>shirt,<rt>Am</rt></ruby> <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">Without no <ruby>seams<rt>C</rt></ruby> nor needle-<ruby>work,<rt>G</rt></ruby> <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"><ruby>Tell<rt>Am</rt></ruby> her to find me an <ruby>acre<rt>G</rt></ruby> of <ruby>land,<rt>Am</rt></ruby> <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">Between the salt <ruby>water<rt>C</rt></ruby> and the sea <ruby>strands,<rt>G</rt></ruby> <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"><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> <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">And bind it <ruby>all<rt>C</rt></ruby> with a bunch of <ruby>heather,<rt>G</rt></ruby> <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"><ruby>Are<rt>Am</rt></ruby> you going to <ruby>Scarborough<rt>G</rt></ruby> <ruby>Fair?<rt>Am</rt></ruby> <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">Remember <ruby>me<rt>C</rt></ruby> to the one who lives <ruby>there,<rt>G</rt></ruby> <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>
</body>
</html>
