HTML-Audio

Die Video-Lektion zeigte bewegte Bilder. Audio ist der Nur-Ton-Cousin: Podcasts, Sprachnotizen, Lektionsintros und kurze Effekte. Das Element heißt audio. Beginne mit controls, damit Besucher selbst abspielen — dieselbe Höflichkeit wie bei Video — ohne poster, Bildfläche oder reservierte Videobox. Eine schlanke Leiste holt eine Datei aus media/ und hält das Layout ruhiger als ein voller Clip.

Was audio leistet

audio lässt den Browser eine Sounddatei laden und einen kompakten Player zeigen. Du setzt eine Datei mit src oder listest mehrere <source>-Kinder, damit der Browser ein Format wählt, das er versteht. Es gibt keine Bildfläche wie bei video; mit controls siehst du typischerweise eine schmale Leiste. Timeline, Stummschaltung und Lautstärke bleiben wichtig, weil Ton einen stillen Raum genauso stört wie lautes Video. Behandle den Player als Werkzeug, das der Besucher bedient — nicht als Hintergrund, der von selbst startet.

Direkte Antwort

Schreibe <audio controls src="sound.mp3"> oder nest mehrere <source>-Tags für Formate wie MP3 und Ogg. Kurzen Fallback-Text (optional Download-Link) im Element belassen. Komprimierte Web-Dateien bevorzugen. Überraschendes Autoplay mit Ton vermeiden. Wenn der Clip mit Sprache lehrt, Transkript oder klare Notizen neben dem Player planen.

Formate für Einsteiger

Nicht jeder Browser bevorzugt denselben Codec. Einsteiger starten oft mit MP3 und ergänzen Ogg als zweite Quelle. WAV ist gut zum lokalen Schneiden, oft aber zu groß als einzige Web-Kopie. Die Tabelle ist eine praktische Startkarte — keine Codec-Enzyklopädie.

Einfaches Audio mit controls

Ein kurzes MP3 plus controls reicht für viele Übungsseiten. Datei unter media/ legen, Pfad wie bei Bild-URLs prüfen. Erscheint die Leiste ohne Wiedergabe, Entwicklertools öffnen oder die Datei-URL direkt testen — kaputte Pfade scheitern still.

Die einfache Probe lesen

• controls zeigt Play, Pause, Suchen und oft Lautstärke
• src zeigt auf die Sounddatei relativ zur Seite (hier unter media/)
• Innerer Text ist Fallback, wenn das Element nicht spielt
• Kein poster hier — das gehört zu video
• Für eine einfache Audioleiste brauchst du meist kein width wie bei Video

Mehrere Quellen und Download-Link

Ogg und MP3 mit MIME-type-Werten erhöhen die Chance auf einen spielbaren Kandidaten. Reihenfolge zählt: Der Browser geht die Liste durch, bis er etwas dekodieren kann. Ein Download-Link hilft bei Fehlschlägen oder zum Speichern. Beim Export zweier Formate denselben Unterrichtsinhalt in jeder Datei behalten.

Die Mehrquellen-Probe lesen

• Quellen werden der Reihe nach versucht, bis etwas spielbar ist
• type hilft, ununterstützte Formate schnell zu überspringen
• Der Download-Link ist menschenfreundlicher Fallback in audio
• Dateinamen und Ordner genau halten — Tippfehler in src wirken wie ein kaputter Player
• Für Minidemos reicht oft ein einzelnes src; Mehrquellen sind die Robustheitsstufe

Ohren und Bandbreite respektieren

Autoplay mit Ton ohne klare Nutzeraktion wird oft blockiert und ist meist unhöflich. Fehlende controls lassen Besucher ohne Pause feststecken. Ein langes unkomprimiertes WAV vergeudet Mobilvolumen, wenn ein kompaktes MP3 dieselbe Idee lehrt. Web-Audio wie Web-Video exportieren. Hintergrundmusik später ist eine eigene Designentscheidung mit Zustimmung und Stummschaltung — nicht die Standardeinstellung einer Anfängerseite.

Transkript, wenn Sprache lehrt

Erklärt der Clip ein Konzept in Worten, plane ein Transkript oder klare Notizen auf der Seite. audio nutzt kein alt wie img. Barrierefreiheit für Sprache bedeutet Textalternativen, klare Überschriften neben dem Player und Nutzerkontrolle — kein Posterbild. Schon ein kurzer Absatz, der den gesprochenen Tipp wiederholt, hilft Menschen, die gerade nicht hören können.

Audio vs. Video vs. Embeds

• Selbst gehostete Sounddatei → audio
• Selbst gehosteter Clip mit Bild → video
• Player-Seite einer anderen Site → oft iframe (spätere Lektion zu YouTube-artigen Embeds)
  Stecke einen Podcast nicht in video, nur weil du dort zuerst controls gesehen hast. Wickle eine lokale MP3 nicht in ein iframe, wenn audio reicht. Element und Medienart matchen.

Übung im Editor

1. Kurzes .mp3 unter media/ legen (zehn bis dreißig Sekunden reichen).
2. Mit audio controls und korrektem Relativpfad einbetten.
3. Play, Pause, Suchen und Lautstärke in der Browser-UI testen.
4. Optional zweiten source-Typ und Download-Link ergänzen.
5. Einen Satz Transkript oder Notizen neben den Player schreiben, wenn gesprochen wird.
6. Prüfen, ob die Seite ohne Play-Druck noch Sinn ergibt.

Leichte Fehler

• Autoplay mit Ton ohne klare Nutzeraktion
• Fehlende controls
• Riesiges unkomprimiertes WAV statt MP3
• poster auf audio erwarten
• Fallback-Text oder Download-Pfad vergessen
• YouTube-artige iframe-Embeds mit selbst gehostetem audio verwechseln
• Unterschiedlichen gesprochenen Inhalt in jeder source beim Testen
• Kaputten media/-Pfad und den Browser beschuldigen

Zusammenfassung

• audio bettet Sounddateien ein, die du hostest
• Mit controls können Besucher spielen, pausieren und suchen
• Mehrere source-Formate mit type verbessern die Unterstützung
• Komprimierte Dateien und nutzergestartete Wiedergabe bevorzugen
• Transkript oder Notizen planen, wenn Sprache die Lektion trägt
• Audio für Ton, Video für Bild+Ton, iframe für fremde Player