Audio- und Videoelemente unter HTML5
HTML5 ist die neuste Version von HTML und bietet Ihnen unter anderem die Möglichkeit, ohne externe Skripte bzw. Programmiersprachen schnell und einfach Video- oder Audiodateien in eine Website einzubinden.
- Dies wird dabei mit den Tags "video" und "audio" umgesetzt, innerhalb derer Sie dann die Quelle Ihrer Video- bzw. Audiodateien angeben müssen.
- Allerdings müssen Sie bei HTML5 bedenken, dass diese Version von älteren Webbrowsern nicht unterstützt wird, was zum Beispiel beim Internet Explorer 7 oder 8 der Fall ist.
- Alle neueren Webbrowser unterstützten ohne Probleme HTML5, sodass Sie auch Hintergrundmusik über den Audio-Tag erstellen können. Dabei müssen jedoch beachten, dass die unterschiedlichen Webbrowser nicht jedes Musikformat unterstützen. Um sicherzugehen, dass Ihre Musik von allen neuen Webbrowsern wiedergegeben werden kann, sollten Sie am besten zwei Musikdateien als Quelle angeben, sodass dann der jeweilige Webbrowser das passende Format abspielen kann.
- So sollten Sie für die Webbrowser Internet Explorer und Safari das MP3-Format nutzen sowie für Opera und Mozilla Firefox das OGG-Musikformat. Google Chrome kann dagegen sowohl MP3- als auch OGG-Musikdateien ohne Probleme abspielen.
Vor allem auf einer Künstler-Homepage ist ein Musik-Player nützlich und sinnvoll. Auch wenn Sie …
Hintergrundmusik mit HTML5 einbinden
Mit HTML5 können Sie schnell und einfach Hintergrundmusik für eine Seite erstellen:
- Laden Sie dafür zunächst die MP3- und OGG-Version Ihres Hintergrundliedes auf Ihren Webserver hoch und merken Sie sich den Speicherort (zum Beispiel der Ordner "audio").
- Öffnen Sie nun die HTML-Datei, in die Sie die Hintergrundmusik einbinden möchten.
- Gehen Sie dann an eine beliebige Stelle im body-Bereich und schreiben Sie zunächst den vollständigen Audio-Tag hin, also "".
- Geben Sie danach innerhalb des Audio-Tags die Quellen Ihrer Musikdateien an. Sollten diese zum Beispiel "musik.mp3" und "musik.ogg" lauten, müssten Sie "" schreiben. Achten Sie dabei auf den richtigen Pfad bei "src", wobei Sie natürlich auch den absoluten Pfad der Dateien angeben können. Wenn Ihre Website zum Beispiel "ihrewebadresse.de" lautet, wäre der absolute Pfad zur MP3-Datei "http://www.ihrewebadresse.de/audio/musik.mp3".
- Damit die Hintergrundmusik automatisch beim Aufrufen abgespielt wird, müssen Sie den Audio-Tag noch um das Attribut "autoplay" erweitern, also "" schreiben.
- Wenn Sie möchten, dass sich die Musik wiederholt, müssen Sie noch "loop" hinzufügen, also "" verwenden.
- Speichern Sie die HTML-Datei ab. Sie müssen diese dann gegebenenfalls noch auf Ihren Webserver hochladen.
Weiterlesen:
Wie hilfreich finden Sie diesen Artikel?
