<audio> gestalten

[Linuchs]

Hallo,

die Audio-Schaltfläche erinnert mehr an ein Braunkohle-Brikett (Firefox) als ein modernes Bedienungselement:

<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>

... und lässt sich nicht wie gewohnt gestalten:

audio {
  display: inline-block;
  width: 10em;
  max-height: 1em;
  vertical-align: middle;
  margin-right: 1em;
}

Finde keine Hinweise auf Gestaltungsmöglichkeiten.

Linuchs

[Reinhard]

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

[Matthias Scharwies]

Servus!

Finde keine Hinweise auf Gestaltungsmöglichkeiten.

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.

Im wiki gibt es beim video-Element folgenden (sehr rudimentären) Player, der aber zeigt, wie die Events an die Buttons gehängt werden.

Herzliche Grüße

Matthias Scharwies

[Linuchs]

Hallo Matthias,

Im wiki gibt es beim video-Element folgenden (sehr rudimentären) Player, der aber zeigt, wie die Events an die Buttons gehängt werden.

Danke für den Link. Dort wundere ich mich über diesen Hinweis im Code: Ihr Browser kennt das HTML5-video-Element noch nicht.

Wie hilfreich :-( Besser wäre doch wohl, die Video-Datei zu verlinken, damit der evtl. vorhande lokale Player anspringt.

Ich war ganz froh, dass man in HTML5 keine Flash Player und damit kein Javascript mehr braucht für Hörproben.

Nun wieder Javascript für so grundlegende Funktionen? Ich hab's meistens ausgeschaltet, weil damit immer öfter Zettel ins Bild fallen und dann mitten im Zentrum kleben bleiben. Auch lassen sich Seiten nicht mehr scrollen. Was weiss ich, warum, vielleicht arbeitet der Rechner im Hintergrund an der Konzernbilanz.

Gruß, Linuchs

[Gunnar Bittersmann]

@@Linuchs

Ich war ganz froh, dass man in HTML5 keine Flash Player und damit kein Javascript mehr braucht für Hörproben.

Braucht man ja auch nicht.

Nun wieder Javascript für so grundlegende Funktionen?

Das Ersetzen der nativen Audio-/Video-Player, weil einem deren Aussehen nicht gefällt, ist keine „grundlegende Funktion“.

Und wenn das JavaScript nicht ausgeführt wird, wird ja der native Player angezeigt.

LLAP 🖖

[Matthias Scharwies]

Servus!

Hallo Matthias,

Im wiki gibt es beim video-Element folgenden (sehr rudimentären) Player, der aber zeigt, wie die Events an die Buttons gehängt werden.

Danke für den Link. Dort wundere ich mich über diesen Hinweis im Code: Ihr Browser kennt das HTML5-video-Element noch nicht.

Das wäre der Fallback für alte Browser (IE<9), ist auch weiter oben im Artikel beschrieben.

Herzliche Grüße

Matthias Scharwies