Melanie Hoffmeister: kann man <audio> formatieren?

Hallo Forum,

ich möchte auf einer Seite verschiedene Hörproben anbieten. Dazu habe ich auf einem HTML5-Tutorial das Element <audio> gefunden. Leider wird das Anzeigeelement im IE extrem gross dargestellt, mehr als doppelt so breit und hoch wie beispielsweise bei Firefox.

Ist dies die einzig semantisch korrekte Form zum Abspielen von Audiodateien und wenn ja, kann man die Formatierung beeinflussen? Ich habe leider nichts passendes gefunden.

Gruss Mel

  1. Servus!

    ich möchte auf einer Seite verschiedene Hörproben anbieten. Dazu habe ich auf einem HTML5-Tutorial das Element <audio> gefunden. Ist dies die einzig semantisch korrekte Form zum Abspielen von Audiodateien

    Das ist das korrekte Element

    und wenn ja, kann man die Formatierung beeinflussen?

    Leider nicht mit CSS, man kann aber mit JavaScript einen Player drüberstülpen:

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun - packen wir's an.
    1. Servus!

      Dem audio-Artikel im Wiki fehlt ein Live-Beispiel. Wer könnte dazu ein lizenzfreies Stück in .mp3 und .ogg liefern?

      Danach könnte man dieses Beispiel auch für ein Tutorial für einen eigenen Medienplayer verwenden.

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun - packen wir's an.
      1. @@Matthias Scharwies

        Wer könnte dazu ein lizenzfreies Stück in .mp3 und .ogg liefern?

        Wikimedia Commons: https://upload.wikimedia.org/wikipedia/commons/f/f3/Anthem_of_Europe_%28US_Navy_instrumental_short_version%29.ogg

        LLAP 🖖

        --
        „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
        „Hat auf dem Forum herumgelungert …“
        (Wachen in Asterix 36: Der Papyrus des Cäsar)
        1. Servus!

          Wer könnte dazu ein lizenzfreies Stück in .mp3 und .ogg liefern?

          Wikimedia Commons: https://upload.wikimedia.org/wikipedia/commons/f/f3/Anthem_of_Europe_%28US_Navy_instrumental_short_version%29.ogg

          Danke!

          Die Europahymne - die Älteren unter uns werden sich vielleicht noch an ein Europa ohne Grenzkontrollen und mit einer gemeinsamen Währung erinnern.

          Herzliche Grüße

          Matthias Scharwies

          --
          Es gibt viel zu tun - packen wir's an.
      2. Tach,

        Wer könnte dazu ein lizenzfreies Stück in .mp3 und .ogg liefern?

        du suchst eine freie Lizenz, nicht Lizenzfreiheit.

        mfg
        Woodfighter

    2. @@Matthias Scharwies

      kann man die Formatierung [von <audio>] beeinflussen?

      Leider nicht mit CSS

      Oh doch! Browser reagieren durchaus auf width und height.

      WebKits haben sogar ein Sammelsurium an Pseudoelementen.

      LLAP 🖖

      --
      „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
      „Hat auf dem Forum herumgelungert …“
      (Wachen in Asterix 36: Der Papyrus des Cäsar)
      1. Hallo,

        sind denn diese Pseudoelemente "offiziell" oder laufe ich da Gefahr, dass diese irgendwann nicht mehr funktionieren oder gar nicht browserübergreifend sind? Ich habe ja immer noch das Problem der Übergrösse des Audiopanels bei IE. Mit der Grösse bei Firefox kann ich leben.

        Grus Mel

        @@Matthias Scharwies

        kann man die Formatierung [von <audio>] beeinflussen?

        Leider nicht mit CSS

        Oh doch! Browser reagieren durchaus auf width und height.

        WebKits haben sogar ein Sammelsurium an Pseudoelementen.

        LLAP 🖖

        „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
        „Hat auf dem Forum herumgelungert …“
        (Wachen in Asterix 36: Der Papyrus des Cäsar)

        1. @@Melanie Hoffmeister

          sind denn diese Pseudoelemente "offiziell"

          Nichts, was -webkit- oder einen anderen Präfix hat, ist offiziell.

          oder laufe ich da Gefahr, dass diese irgendwann nicht mehr funktionieren oder gar nicht browserübergreifend sind?

          Ja, wie bei allem mit irgendwelchem Präfix.

          Ich habe ja immer noch das Problem der Übergrösse des Audiopanels bei IE.

          Hast du denn eine Größe angegeben?

          LLAP 🖖

          PS. Bitte kein TOFU. Zitiere sinnvoll, nicht alles.

          --
          „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
          „Hat auf dem Forum herumgelungert …“
          (Wachen in Asterix 36: Der Papyrus des Cäsar)
          1. @@Melanie Hoffmeister

            sind denn diese Pseudoelemente "offiziell"

            Nichts, was -webkit- oder einen anderen Präfix hat, ist offiziell.

            oder laufe ich da Gefahr, dass diese irgendwann nicht mehr funktionieren oder gar nicht browserübergreifend sind?

            Ja Gunnar,

            sowohl Breite als auch Höhe, das nimmt auch der IE an, jedoch sind dann die Symbole (Play etc.) abgeschnitten, das bringt also nicht wirklich etwas. Und auf anderen Viewports, wie etwa Smartphone, ist es von Anfang an - also ohne Breiten-, Hhöhenangabe abgeschnitten. Ich hätte es eben gerne responsive.

            Gruss Mel

            Ja, wie bei allem mit irgendwelchem Präfix.

            Ich habe ja immer noch das Problem der Übergrösse des Audiopanels bei IE.

            Hast du denn eine Größe angegeben?

            LLAP 🖖

            PS. Bitte kein TOFU. Zitiere sinnvoll, nicht alles.

            „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
            „Hat auf dem Forum herumgelungert …“
            (Wachen in Asterix 36: Der Papyrus des Cäsar)

            1. @@Melanie Hoffmeister

              sowohl Breite als auch Höhe, das nimmt auch der IE an, jedoch sind dann die Symbole (Play etc.) abgeschnitten

              Hm, IE 11 schneidet nichts ab, sondern skaliert die Symbole. Was für einen IE hast du da?

              Und wäre das in irgendeiner Form relevant, wenn der Audio-Player in alten IEs anders aussähe als in anderen Browsern? (D.h. größer; es soll natürlich nichts abgeschnitten sein.)

              LLAP 🖖

              PS:

              PS. Bitte kein TOFU. Zitiere sinnvoll, nicht alles.

              Das erste davon hätte ja schon mal geklappt. Das zweite klappt sicher auch noch. ;-)

              --
              „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
              „Hat auf dem Forum herumgelungert …“
              (Wachen in Asterix 36: Der Papyrus des Cäsar)
              1. Du hast recht Gunnar,

                Firefox reagiert nicht so intensiv wie IE11 habe es jetzt mal probiert Link zur Testseite 1

                Jetzt habe ich ein weiters Problem: Auf die Seite sollen eine Reihe von Audiofiles gelistet werden, doch möchte ich nicht für jede File das Audio-Element nehmen. Habe nach Audio mit Playlist gesucht und eine Lösung mit relativ schlankem Javascript gefunden. Habe das 1 zu 1 übernommen. Leider wird auf meiner Testseite immer ein neues Fenster eröffnet. Habe schon stundenlang nach dem Fehler gesucht, ich finde keinen. Link zur Scriptquelle Link zur Testseite 2

                Gruss Mel

                [unerwünschtes Vollzitat entfernt]