Das Hinzufügen von Audio zu einer Webseite mit HTML ist ziemlich einfach. Jeder mit grundlegenden HTML-Kenntnissen kann dies tun. Der Schlüssel liegt darin, zu verstehen, wie das

Allerdings ist die Audioqualität genauso wichtig wie die Funktionalität. Wenn Sie Sprachaufnahmen hinzufügen, kann die Verwendung eines hochwertigen Mikrofons einen großen Unterschied machen. So etwas wie das Hollyland LARK A1 funktioniert hervorragend. Es bietet eine starke Leistung mit Funktionen wie Auto-Limit Clip Protection, einer drahtlosen Reichweite von 200 Metern und 3 Stufen intelligenter Geräuschunterdrückung.

Hollyland LARK A1 - Affordable Wireless Microphone

A perfect starter mic for creators on a budget. It’s simple to use and features effective noise cancellation.

Key Features: 48kHz/24-bit | 3-Level Noise Cancellation | 54-Hour Battery

Check on Amazon

Wie das HTML-Audio-Tag funktioniert

Sie können Ton auf einer Webseite mit dem

Platzieren Sie das Source-Tag innerhalb des Audio-Tags, um Ihre Datei zu verknüpfen. Dies teilt dem Browser mit, welches Audio geladen und welches Format erwartet werden soll. Wenn ein Browser das Audio-Tag nicht unterstützt, können Sie eine kurze Nachricht anzeigen. Auf diese Weise wissen die Benutzer, dass die Soundfunktion für sie nicht funktioniert.

Es gibt auch ein paar zusätzliche Attribute:

• autoplay: Startet das Audio, wenn die Seite geladen wird.
• muted: Schaltet das Audio standardmäßig stumm.
• loop: Wiederholt das Audio immer wieder.

HTML unterstützt diese drei Audioformate:

• MP3 (beste Unterstützung in allen Browsern)
• WAV
• OGG

MP3 ist die sicherste Wahl, da es fast überall funktioniert.

Wie man Audio in HTML hinzufügt: Schritt-für-Schritt-Anleitung

Befolgen Sie diese Schritte, um Audio zu Ihrer HTML-Seite hinzuzufügen:

1. Bereiten Sie Ihre Audiodatei vor

• Verwenden Sie MP3 für beste Ergebnisse in allen Browsern.
• Platzieren Sie die Audiodatei im selben Ordner wie Ihre HTML-Datei.

• Sie können kostenlose Musik aus der Audio-Bibliothek von YouTube beziehen.

Sie können auch Titel von jeder lizenzfreien Website herunterladen.

2. Erstellen Sie die HTML-Struktur

• Öffnen Sie Ihre HTML-Datei.
• Fügen Sie innerhalb des einen öffnenden und schließenden

<audio></audio>

• Speichern Sie die HTML-Datei und aktualisieren Sie den Browser.

3. Fügen Sie dem Audio-Player Steuerelemente hinzu

• Fügen Sie innerhalb des öffnenden

<audio controls></audio>

• Speichern und aktualisieren Sie die Seite.
• Sie sollten einen Audio-Player auf der Browserseite sehen.

Im Moment sollte die Leiste jedoch ausgegraut sein, was signalisiert, dass wir weitere Attribute und Tags hinzufügen müssen.

4. Verknüpfen Sie die Audiodatei

• Fügen Sie zwischen den öffnenden und schließenden Audio-Tags ein Tag ein.
• Verwenden Sie das Attribut ‘src’, um auf den Namen der Audiodatei zu verweisen.

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

• Speichern und aktualisieren Sie. Die Audio-Steuerelemente sollten jetzt aktiv sein.

5. Fügen Sie eine Fallback-Nachricht hinzu

• Falls der Browser Audio nicht unterstützt, schreiben Sie eine einfache Nachricht.

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

6. Verwenden Sie einen Dateipfad (wenn sich Audio in einem anderen Ordner befindet)

• Wenn sich die Audiodatei nicht im selben Ordner befindet, geben Sie den vollständigen Pfad an.

<source src="C:/Users/YourName/Desktop/bro_time.mp3" type="audio/mpeg">

7. Wiederholen Sie das Audio

• Um das Audio kontinuierlich zu wiederholen, fügen Sie ‘loop’ zum Audio-Tag hinzu.

<audio controls loop>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

8. Starten Sie das Audio stummgeschaltet

• Um das Audio standardmäßig stumm abzuspielen, verwenden Sie muted.

<audio controls muted>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

9. Spielen Sie das Audio automatisch ab

• Fügen Sie autoplay hinzu, um das Audio automatisch zu starten.

<audio controls autoplay>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

Wichtig: Autoplay funktioniert in modernen Browsern, insbesondere Chrome und Mobile, nicht gut. Außerdem empfehlen viele Experten das Autoplay-Audio-Tag nicht, da es die Privatsphäre der Benutzer verletzen kann.

10. Blenden Sie Steuerelemente für Hintergrundaudio aus

• Entfernen Sie das Attribut controls, um Hintergrundmusik ohne sichtbaren Player abzuspielen.

<audio autoplay>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

• Verwenden Sie dies mit Bedacht. Automatisch abgespieltes, verstecktes Audio kann Benutzer verärgern.

Anwendungsfall: Erstellen einer Webseite mit mehreren Audiodateien

Möchten Sie ein echtes Beispiel ausprobieren? Erstellen wir eine einfache Musikseite. Dies kann ein unterhaltsames Projekt sein. Alles, was Sie brauchen, sind ein paar Audiodateien und eine einfache HTML-Datei.

Befolgen Sie diese Schritte, um es zu erstellen:

Bereiten Sie Ihre Audiodateien vor

• Wählen Sie mindestens vier MP3-Songs oder Soundclips aus
• Benennen Sie sie eindeutig wie bro_time.mp3, block_party.mp3
• Platzieren Sie alle Audiodateien im selben Ordner wie Ihre HTML-Datei

Starten Sie ein neues HTML-Dokument

• Öffnen Sie einen beliebigen Texteditor wie Notepad oder VS Code
• Erstellen Sie eine leere .html-Datei
• Speichern Sie sie im selben Ordner wie Ihre Audiodateien

Richten Sie den Seitentitel ein

• Fügen Sie im Abschnitt eine Hauptüberschrift hinzu

MeTunes

Fügen Sie den ersten Audiotrack hinzu

• Geben Sie den Namen des Songs mit einem

  Tag ein

• Fügen Sie darunter einen Audio-Player mit der Quelldatei hinzu

<h3>Bro Time</h3>

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

Wiederholen Sie dies für weitere Songs

• Kopieren Sie die gleiche Struktur
• Ändern Sie die Überschrift und den Namen der Quelldatei

<h3>Block Party</h3>

<audio controls>

  <source src="block_party.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<h3>City Night Lights</h3>

<audio controls>

  <source src="city_night_lights.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<h3>Beat Your Competition</h3>

<audio controls>

  <source src="beat_your_competition.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

Fügen Sie zwischen jedem Track Platz hinzu

• Verwenden Sie
  Tags, um zusätzlichen Abstand hinzuzufügen
• Dies hält die Seite sauber und leicht lesbar

Testen Sie es in einem Browser

• Doppelklicken Sie auf Ihre HTML-Datei, um sie zu öffnen
• Stellen Sie sicher, dass alle Songs korrekt funktionieren
• Wenn etwas nicht abgespielt wird, überprüfen Sie die Dateinamen und Pfade

Sie haben jetzt eine funktionierende Musikseite mit einfachem HTML. Jede Audiodatei zeigt ihren eigenen Player, und alles wird einwandfrei abgespielt.

TIPP: Hier ist der vollständige Code dieses Projekts. Kopieren Sie ihn einfach und fügen Sie ihn ein. Ändern Sie die Dateipfade und Songnamen, um das Hinzufügen Ihrer Lieblingssongs zu einer HTML-Site zu üben.

<!DOCTYPE html>

<html>

  <head>

  <title>MY PRACTICE AUDIO HTML SITE</title>

</head>

  <body>

    <h1>SongSite</h1>

    <br>

Song One:

    <br>

<audio controls>

  <source src="song_one.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<br>

Song Two:

    <br>

<audio controls>

  <source src="song_two.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

    <br>

  Song Three:

    <br>

<audio controls>

  <source src="song_three.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<br>

    Song Four:

    <br>

<audio controls>

  <source src="song_four.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

    <br>

  </body>

</html>

Wenn Sie es richtig gemacht haben, sollte die HTML-Seite ähnlich wie diese aussehen:

Fazit

Wenn Sie die Grundlagen des Audio-Tags verstehen, wird das Einfügen von Musik in eine HTML-Seite zum Kinderspiel. Dieser Artikel zeigt jeden wichtigen Schritt, mit dem Sie einen Audiotrack zu HTML hinzufügen können.

Es ist jedoch wichtig, dass Sie die richtigen Attribute verwenden, um die Privatsphäre der Benutzer zu gewährleisten. Ebenso empfehlen wir immer, lizenzfreie oder lizenzierte Musik zu verwenden, um sich vor Urheberrechtsverletzungen zu schützen.

FAQs

1. Wie macht man den Audio-Player in HTML unsichtbar?

Um den Audio-Player verborgen zu halten, lassen Sie das Wort controls im Tag weg. Wenn jemand Ihre Seite besucht, wird das Audio abgespielt, ohne etwas anzuzeigen. Wenn Sie auch autoplay verwenden, startet es sofort. Seien Sie einfach vorsichtig. Einige Browser blockieren möglicherweise den Ton, wenn keine Steuerelemente vorhanden sind.

2. Was machen die Audio- und Video-Tags in HTML?

Mit den Audio- und Video-Tags können Sie Ton oder Video hinzufügen. Sie können Musik oder Clips direkt auf Ihrer Seite platzieren. Diese Tags sind Teil von HTML5 und funktionieren heute in den meisten Browsern. Fügen Sie sie im Body-Abschnitt hinzu, um Player auf dem Bildschirm anzuzeigen. Sie unterstützen auch verschiedene Dateitypen, abhängig vom Browser.

3. Verwenden die Leute immer noch HTML für moderne Websites?

Ja, HTML wird immer noch verwendet, um jede Website online zu erstellen. Sogar fortgeschrittene Seiten benötigen HTML für Struktur und Layout. Es hilft bei SEO, Ladegeschwindigkeit und Seitendesign. Ob es sich um eine kleine oder eine komplexe Seite handelt, HTML ist immer noch wichtig. Ohne sie würde keine Website in einem Browser korrekt geladen.