Alle Kategorien
Suche

HTML-Seite mit Sound erstellen - so funktioniert's

Autor: Kevin Höbig

Falls Sie für Ihre Website eine Seite planen, auf welcher Sie bestimmte Musik-Stücke abspielen lassen möchten, können Sie dies in HTML auf verschiedene Weise machen. Erfahren Sie hier, welche Möglichkeiten Sie haben, und wie Sie eine Sound-Datei mit HTML5 einbinden können.

Sound-Dateien können Sie mit HTML5 einbinden.
Sound-Dateien können Sie mit HTML5 einbinden.

Musik in HTML-Seiten einbinden

Wenn Sie auf Ihrer Website Sound-Elemente anbieten möchten, haben Sie grundsätzlich zwei Möglichkeiten zur Auswahl.

  • Einerseits könnten Sie im Hintergrund eine Musikdatei abspielen lassen, sodass der Besucher Ihrer Website keine Einflussmöglichkeiten auf die Wiedergabe hat.
  • Anderseits könnten Sie auch einen Musik-Player auf Ihrer HTML-Seite einbinden, wobei Sie entweder auf ein fertiges und kostenloses Script zurückgreifen können (zum Beispiel jPlayer) oder mithilfe von HTML5 eine eigene Musik-Datei einbinden.
  • HTML5 wird allerdings nur von neueren Webbrowsern unterstützt, sodass die Einbindung zum Beispiel bei älteren Internet-Explorer-Versionen (bis 8) nicht funktioniert.
  • Zudem werden von den verschiedenen Webbrowsern unterschiedliche Musik-Formate unterstützt, sodass Sie am besten beide Formate einbinden sollten, um alle gängigen Webbrowser abdecken zu können.
  • So unterstützen Google Chrome, der Internet Explorer und Safari das MP3-Format, während Mozilla Firefox und Opera lediglich das OGG-Format unterstützen (ebenso Google Chrome).

Sound mit HTML5 einbinden

Um auf einer HTML-Seite eine Musik-Datei zum Anhören anzubieten, können Sie dies mit wenigen Zeilen HTML5-Code machen.

  • Der grundsätzliche Aufbau des Audio-Tags unter HTML5 sieht wie folgt aus:
    <audio>
    <source src="musik.mp3" type="audio/mp3" />
    <source src="musik.ogg" type="audio/ogg" />
    </audio>
  • Innerhalb des Audio-Tags müssen Sie die Quellen ("Source") für Ihre beiden Sound-Dateien angeben, wobei Sie bei "src" den genauen Pfad (relativ oder absolut) zur Musik-Datei festlegen müssen. Sollte sich die Datei zum Beispiel im Unterordner "musik" befinden, könnten Sie als relativen Pfad "musik/musik.mp3" oder als absoluten Pfad "www.ihrewebsite.de/musik/musik.mp3" angeben.
  • Bei "type" müssen Sie darauf achten, dass Sie das richtige Format angeben, also bspw. bei einer MP3-Datei "audio/mp3" angeben.
  • Sie können den Audio-Tag noch erweitern, indem Sie zum Beispiel das automatisch Abspielen ("autoplay") aktivieren, das Musikstück wiederholen lassen ("loop") oder Steuerungselemente für den Musik-Player einstellen ("controlls"): <audio controls autoplay loop>.
  • Zudem haben Sie die Möglichkeit, eine Nachricht anzeigen zu lassen, falls der jeweilige Browser HTML5 nicht unterstützt. Dazu müssten Sie lediglich vor dem Schließen des Audio-Tags (</audio>) den gewünschten Text eintippen. 
  • Ein möglicher Musik-Player mit HTML5 könnte also wie folgt aussehen:
    <audio controls autoplay loop>
    <source src="musik/musik.mp3" type="audio/mp3" />
    <source src="musik/musik.ogg" type="audio/ogg" />
    Schade, Ihr verwendetet Browser unterstützt HTML5 leider nicht.
    </audio>
Weiterlesen:
Teilen: