Reinhard: <audio> gestalten

Beitrag lesen

Hey,

<audio controls>
  <source src="../mp3/sailing_home_sc_freesenkraft.ogg" type="audio/ogg">
  <source src="../mp3/sailing_home_sc_freesenkraft.mp3" type="audio/mpeg">
</audio>

Finde keine Hinweise auf Gestaltungsmöglichkeiten.

Das <audio> lässt sich nicht "direkt" gestalten. Wenn ich dich richtig verstehe, dann willst du praktisch deinen eigenen Player designen. Das hat z.B. den Vorteil, dass es dann in allen Browsern identisch aussieht.

Dazu musst du das controls Attribut im <audio> Tag weglassen. Anschließend kannst du dann für alle Funktionalitäten, die dein Player bieten soll, dir aus dem HTML-Baukasten und der CSS-Farbpalette etwas zusammenschustern.

Dann hauchst du dem ganzen mit Javascript Leben ein, indem du deine Elemente mit .click-Events präparierst. Zugriff auf dein Lied, die aktuelle Position, die Lautstärke und noch einiges mehr bekommst du durch das <audio> Element. z.B. audio.volume.
Dazu sollte auch einiges im Netz zu finden sein.

Reinhard