HTML-Seite mit Sound erstellen - so funktioniert's

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.


Hintergrundmusik in einer HTML-Datei einfügen - so gelingt's mit HTML5

Falls Sie gerne auf Ihrer Website eine Hintergrundmusik laufen lassen möchten, können Sie dies …

• 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>