HTML - Audio

  »   HTML  »   HTML Tutorial - Einfügen von Sounds und Musik in HTML-Seiten

Vor einiger Zeit war es ziemlich kompliziert, Musik oder Töne auf einer Webseite einzufügen. Nun, das Problem ist gelöst, das Hinzufügen von Sounds ist ganz einfach.

html<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />

Es wird empfohlen, dass sowohl die Höhe und auch Breite direkt proportional sind, um Probleme zu vermeiden.

Um dem Player zu verstecken, muss der Wert des verborgenen Attribut (das im Moment false ist) durch true ersetzt werden. Das wird gemacht, wenn Sie absolut sicher sind, dass der Benutzer nicht wünscht, den Ton zu stoppen.

Kontrollieren und die Ändern des Audio-Player

Lassen Sie das obige Beispiel ansehen:

html<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />
  • autostart - legt fest, ob der Ton sofort beginnt, nachdem die Webseite geladen wurde. Kann true oder false Wert haben.
  • loop - legt fest, ob der Ton in Endlos-Schleife abgespielt wird. Kann true oder false Wert haben.
  • volume - kann einen beliebigen Wert von 1 bis 100 haben.

Sie können ein wenig mit diesen Attributen spielen, um sie besser kennen und verstehen zu lernen, und sich auch bewusst darüber werden, dass eine höhere Lautstärke für den Benutzer lästig sein kann.

HTML 5 Audio-Tag

Mit der Einführung von HTML5 haben sich Audio-Tags sehr schnell ausgebreitet und sie werden sehr gut von aktuellen Browsern unterstützt. Der Audio-Tag wird verwendet, um Sound und Musik zu HTML-Seiten hinzuzufügen. Im Moment unterstützt der audio-Tag 3 Arten von Audio-Dateien:

  • mp3 - MIME-type audio/mpeg
  • wav - MIME-type audio/wav
  • ogg - MIME-type audio/ogg
html<audio controls>
	<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.mp3" type="audio/mpeg">
	<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.ogg" type="audio/ogg">
	Ihr Browser unterstützt keine dieser Audioformate
</audio>

Demo

BrowserMP3WavOgg
Internet Explorer
Chrome
Firefox
Safari
Opera

Hier finden Sie einen einfachen, aber leistungsfähigen Generator für die Audio html5 Tags