160 lines
6.7 KiB
HTML
160 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Psychoakustik — was MP3 weglässt</title>
|
|
<style>
|
|
:root {
|
|
--dark: #1a1a2e;
|
|
--muted: #6b7280;
|
|
--soft: #f8fafc;
|
|
--border: #cbd5e1;
|
|
--hl: #d63384;
|
|
--kept: #16a34a;
|
|
--tossed: #94a3b8;
|
|
--masker: #2563eb;
|
|
--threshold: #ea580c;
|
|
}
|
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
|
body { padding: 30px 40px; }
|
|
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
|
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
|
|
.sub strong { color: var(--dark); }
|
|
|
|
.chart-wrap {
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
border: 1.5px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 16px 20px;
|
|
}
|
|
.chart-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin-bottom: 8px;
|
|
}
|
|
.chart-title { font-size: 1rem; font-weight: 700; }
|
|
.legend {
|
|
display: flex;
|
|
gap: 16px;
|
|
font-size: 0.78rem;
|
|
color: var(--muted);
|
|
}
|
|
.legend-item { display: flex; align-items: center; gap: 4px; }
|
|
.legend-swatch {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
}
|
|
.legend-swatch.kept { background: var(--kept); }
|
|
.legend-swatch.tossed { background: var(--tossed); }
|
|
.legend-swatch.masker { background: var(--masker); }
|
|
.legend-swatch.threshold {
|
|
background: transparent;
|
|
border-top: 2px dashed var(--threshold);
|
|
height: 8px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.verdict {
|
|
margin-top: 22px;
|
|
max-width: 1180px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
border: 2px solid var(--hl);
|
|
border-radius: 12px;
|
|
padding: 14px 22px;
|
|
}
|
|
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
|
|
.verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
|
|
.verdict-a strong { color: var(--hl); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Psychoakustik — was MP3 wegwirft</h1>
|
|
<div class="sub">Ein lauter Ton macht leise Nachbarn <strong>unhörbar</strong>. Was nicht hörbar ist, muss man nicht speichern.</div>
|
|
|
|
<div class="chart-wrap">
|
|
<div class="chart-head">
|
|
<div class="chart-title">Lautstärke (dB SPL) über Frequenz (Hz, logarithmisch)</div>
|
|
<div class="legend">
|
|
<span class="legend-item"><span class="legend-swatch masker"></span>lauter Ton (Masker)</span>
|
|
<span class="legend-item"><span class="legend-swatch kept"></span>hörbar · bleibt</span>
|
|
<span class="legend-item"><span class="legend-swatch tossed"></span>maskiert · raus</span>
|
|
<span class="legend-item"><span class="legend-swatch threshold"></span>Hörschwelle</span>
|
|
</div>
|
|
</div>
|
|
|
|
<svg viewBox="0 0 1100 380" width="100%" height="380">
|
|
<line x1="80" y1="340" x2="1060" y2="340" stroke="#1a1a2e" stroke-width="1.5"/>
|
|
<line x1="80" y1="20" x2="80" y2="340" stroke="#1a1a2e" stroke-width="1.5"/>
|
|
|
|
<text x="20" y="30" font-size="11" fill="#6b7280">dB</text>
|
|
<text x="40" y="50" font-size="10" fill="#6b7280" text-anchor="end">100</text>
|
|
<text x="40" y="125" font-size="10" fill="#6b7280" text-anchor="end">75</text>
|
|
<text x="40" y="200" font-size="10" fill="#6b7280" text-anchor="end">50</text>
|
|
<text x="40" y="275" font-size="10" fill="#6b7280" text-anchor="end">25</text>
|
|
<text x="40" y="345" font-size="10" fill="#6b7280" text-anchor="end">0</text>
|
|
|
|
<line x1="75" y1="50" x2="80" y2="50" stroke="#1a1a2e"/>
|
|
<line x1="75" y1="125" x2="80" y2="125" stroke="#1a1a2e"/>
|
|
<line x1="75" y1="200" x2="80" y2="200" stroke="#1a1a2e"/>
|
|
<line x1="75" y1="275" x2="80" y2="275" stroke="#1a1a2e"/>
|
|
|
|
<text x="100" y="360" font-size="10" fill="#6b7280">20</text>
|
|
<text x="260" y="360" font-size="10" fill="#6b7280">100</text>
|
|
<text x="420" y="360" font-size="10" fill="#6b7280">500</text>
|
|
<text x="580" y="360" font-size="10" fill="#6b7280">1k</text>
|
|
<text x="740" y="360" font-size="10" fill="#6b7280">5k</text>
|
|
<text x="900" y="360" font-size="10" fill="#6b7280">10k</text>
|
|
<text x="1040" y="360" font-size="10" fill="#6b7280">20k</text>
|
|
<text x="540" y="378" font-size="11" fill="#6b7280" text-anchor="middle">Frequenz [Hz]</text>
|
|
|
|
<path d="M100,80 Q170,130 260,200 Q350,290 420,310 Q500,335 580,330 Q670,310 740,295 Q820,280 900,250 Q970,200 1040,80"
|
|
stroke="#ea580c" stroke-width="2" stroke-dasharray="5,5" fill="none"/>
|
|
|
|
<path d="M460,340 L460,210 Q480,165 580,80 Q680,165 700,210 L700,340 Z"
|
|
fill="#2563eb" opacity="0.15"/>
|
|
<path d="M460,340 L460,210 Q480,165 580,80 Q680,165 700,210 L700,340"
|
|
stroke="#2563eb" stroke-width="2" fill="none" stroke-dasharray="2,3"/>
|
|
|
|
<rect x="572" y="80" width="16" height="260" fill="#2563eb"/>
|
|
|
|
<circle cx="240" cy="270" r="6" fill="#16a34a"/>
|
|
<text x="240" y="260" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
|
|
|
|
<circle cx="420" cy="240" r="6" fill="#16a34a"/>
|
|
<text x="420" y="230" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
|
|
|
|
<circle cx="510" cy="180" r="6" fill="#94a3b8"/>
|
|
<text x="510" y="170" font-size="10" fill="#94a3b8" text-anchor="middle">raus</text>
|
|
|
|
<circle cx="660" cy="200" r="6" fill="#94a3b8"/>
|
|
<text x="660" y="190" font-size="10" fill="#94a3b8" text-anchor="middle">raus</text>
|
|
|
|
<circle cx="640" cy="155" r="6" fill="#94a3b8"/>
|
|
<text x="640" y="145" font-size="10" fill="#94a3b8" text-anchor="middle">raus</text>
|
|
|
|
<circle cx="860" cy="220" r="6" fill="#16a34a"/>
|
|
<text x="860" y="210" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
|
|
|
|
<circle cx="960" cy="170" r="6" fill="#16a34a"/>
|
|
<text x="960" y="160" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
|
|
|
|
<text x="595" y="76" font-size="11" fill="#2563eb" font-weight="700">1 kHz · 90 dB · "Masker"</text>
|
|
<text x="780" y="105" font-size="11" fill="#ea580c" font-weight="700">Hörschwelle (in Ruhe)</text>
|
|
<text x="540" y="160" font-size="11" fill="#2563eb" font-weight="700" text-anchor="middle">Maskierungs-Bereich</text>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="verdict">
|
|
<div class="verdict-q">MP3 kodiert nur, was über der <strong>kombinierten Schwelle</strong> liegt.</div>
|
|
<div class="verdict-a">Alles unterhalb wird weggeworfen — das Ohr hört es ohnehin nicht. So spart MP3 typischerweise <strong>~90 % der Daten</strong>, ohne dass der Mensch im Alltag etwas vermisst.</div>
|
|
</div>
|
|
</body>
|
|
</html>
|