Frage stellen
3

HTML5: Audio Datei einbinden

gefragt 2012-12-09 05:15:18 -0600

jjwe Gravatar-Bild

Wie wird eine Audio-Datei wie MP3 in die Webseite eingebunden?

Bitte ein Beispiel.

bearbeiten Tag verändern Als beleidigend melden schließen merge löschen

1 answer

4

geantwortet 2012-12-09 05:21:52 -0600

quiqq Gravatar-Bild

updated 2012-12-09 06:05:07 -0600

Audio-Dateien in HTML5 werden mit dem <audio> -Tag eingefügt. Damit der Sound von allen Browsern abgespielt wird, braucht man eine Audio-Datei in zwei Formaten in .MP3 und .OGG

Hier ist ein Beispiel:

<audio controls>
  <source src="./irgendein_Ordner/coole_musik_.mp3" type="audio/mp3">
  <source src="./irgendein_Ordner/coole_musik_.ogg" type="audio/ogg">

  Warnung: Dieser Browser unterstützt den HTML5 Audio Tag nicht. 
  Wahrscheinlich benutzen sie den prähistorischen Internet Explorer 8 oder gar 7.
</audio>

Wird von allen gängigen Browsern unterstützt. Internet Explorer unterstützt ihn ab Version 9 (einschließlich 9)


Wenn du möchtest, dass der Sound automatisch abgespielt wird sobald die Webseite aufgerufen wird, dann kannst du noch den autoplay-Parameter hinzufügen:

<audio controls autoplay>
     <source src="./irgendein_Ordner/coole_musik_.mp3" type="audio/mp3">
     <source src="./irgendein_Ordner/coole_musik_.ogg" type="audio/ogg">
      Warnung: Dieser Browser unterstützt den HTML5 Audio Tag nicht. 
      Wahrscheinlich benutzen sie den prähistorischen Internet Explorer 8 oder gar 7.
</audio>

Damit die MP3 immer wieder abgespielt (Schleife) wird gibt es noch den Parameter loop :

<audio controls autoplay loop>
         <source src="./irgendein_Ordner/coole_musik_.mp3" type="audio/mp3">
         <source src="./irgendein_Ordner/coole_musik_.ogg" type="audio/ogg">
          Warnung: Dieser Browser unterstützt den HTML5 Audio Tag nicht. 
          Wahrscheinlich benutzen sie den prähistorischen Internet Explorer 8 oder gar 7.
</audio>
bearbeiten Als beleidigend melden löschen Link mehr

Your Answer

Beginne mit einem anonymen Beitrag - dein Beitrag wird dann veröffentlicht, sobald du dich einloggst oder einen Account eröffnest.

Add Answer

[Vorschau ausblenden]

Antwortwerkzeuge