Audio in HTML-Seiten

Alle Möglichkeiten zur Einbindung von Audio setzen die Kenntnis von HTML voraus. Programmieren muss man für die Nutzung von Sound fast nichts. Die genannten Tags können in allen gängigen Browsern verwendet werden.
  1. Sounds werden in HTML5-Seiten meist mittels audio-Tag eingebunden. Das sieht z.B. wie folgt aus:
  2. Eine weitere Möglichkeit ist die Verwendung von object-, embed- und iframe-Tags.
  3. Auch vollständige Player können in Seiten integriert werden, siehe z.B.:
  4. Und auch die direkte Verlinkung von Dateien ist möglich.

Beispiele

1. Audio in HTML 5

Um in HTML-Seiten Sound einzubetten gibt es seit HTML5 einige weitere standardisierte Möglichkeiten ...
  1. Samples einbinden (unkomprimierte kleine Audio-Dateien)
  2. MP3-Dateien abspielen (komprimierte komplette Audio-Tracks)
  3. MID-Dateien (Midi-Files) abspielen, d.h. Steuersignale an die Soundkarte bzw. Synthesizer oder Sampler senden.
  4. ...

Das audio-Tag

z.B. Abspielen einer MP3-Datei

<!DOCTYPE html>
<html>
  <head>
    <title>MP3-Datei abspielen</title>
    <meta charset="utf-8">
  </head>
 
  <body>
    <audio id="klick" controls>
      <source src="freemp3/classic.mp3"
              type="audio/mp3" />
        Ihr Browser kennt das HTML5-audio-Element noch nicht.
    </audio>
    <a href=""
       onmousedown="document.getElementById('klick').play()">
      Musik abspielen bei gedrückter Maustaste
    </a>
  </body>
 
</html>
 

2. Das IFrame-Tag

<iframe
   allowtransparency="true"
   width=100%”
   height=450
   scrolling=”no”
   frameborder=”no”
   src=”http://...”
>
</iframe>
Das Iframe-Tag ermöglicht u.a. die Integration vollständiger, fertiger Player in die eigene Seite (z.B. Soundcloud).

3. Vollständige Player integrieren

Siehe:

4. Verlinkung

<a  href ="krachmach.wav">Tatü Lalü ganz laut</a>
Mit der Verlinkung einer Sound-Datei wird der Download ermöglicht. Die Datei kann sowohl lokal gespeichert vorliegen als auch irgendwo via URL-Angabe im Internet abgerufen werden.

Weitere Infos


Midi


Soundfonts


Weitere Infos