Kein Audio Player seit Firefox 53.0.2

Hat denn WebAcappella nicht einen Bearbeitungsmodus? Es ist sicherlich ein WYSIWYG-Editor, wo man alles einfach zusammenklicken kann, aber es sollte auch ein Bearbeitungsfenster geben, wo du den HTML-Code bearbeiten kannst. Ich wollte mir das Programm mal herunterladen, aber man muss sich für den Download erst registrieren, auch wenn man es nur testen will.

milupo
Du hast Recht, nur leider ist in diesem speziellen Fall FF, bzw der letzte Update nicht ganz unschuldig.
In der 'alten' Version hat FF das Style Attribut 'height' für den HTML5 Tag <audio> ignoriert, zumindest hatte es keinen Einfluss auf die Höhe des Elementes. Es wurde nur die 'Box', die um den Player herum liegt auf den 'height' Wert eingestellt. Die Darstellung des Players selbst blieb aber immer konstant bei 40px.
Das ist mit der neuen Version immer noch so, nur jetzt reagiert FF bei einer Vorgabe von 'height < 40px' damit, dass der Player gar nicht mehr angezeigt wird. Die Wiedergabe des Soundtracks funktioniert allerdings noch, nur man sieht den Player nicht mehr und kann somit auch nicht auf die 'Controls' zugreifen.

Das hat nichts damit zu tun. In das audio-Tag gehört einfach kein style-Attribut. Ich habe es nämlich testen können. Ich habe den Quelltext in einem Texteditor abgespeichert. Dann erst einmal den DOCTYPE an HTML5 angepasst, denn audio ist ein HTML5-Element. Ich habe alle audio-Tags gesucht und das style-Attribut entfernt. Und siehe da, plötzlich bildeten sich die Audioelemente ab. Dann habe ich mir überlegt, wie der Pfad zur Audio-Datei sein könnte. Das Verzeichnis ist im relativen Pfad im Quelltext und ich habe mir überlegt, die Domain kann nur http://www.mastering-online-studio.de sein. Dadurch konnte ich auf eine Datei zugreifen, ich habe das ja lokal gemacht. Ich habe mir also einen Audio-Tag ausgesucht und den Pfad angepasst, die Datei gespeichert und in Firefox geladen. Und siehe da, das Musikstück wurde abgespielt.

Der Code sieht dann so aus:

<audio controls="controls"> <source src="http://www.mastering-online-studio.de/wa_files/Jazz_20rolling.mp3" type="audio/mp3" />Your browser does not support the audio tag.</audio>

Das ist der Code für das Beispiel rechts unten Jazz / MJ / Master, siehe folgenden Screenshot:

[attachment=0]webacappella.png[/attachment]

Der Ton ist auch da.

Was das Programm angeht, so habe ich die Version 4.6.9 von irgendwoher heruntergeladen und es scheint wirklich keine Editor-Ansicht zu haben.

milupo
So könnte man es machen - aber... ohne ein height-Attribut werden andere Browser (zB IE und Edge) den Player in der bei denen voreingestellten Standardhöhe darstellen und die liegt da bei etwa 80px! Kann dir das Design deiner Webseite ziemlich zerschießen, wenn unterschiedliche Browser Dinge unterschiedlich anzeigen.

siehe https://wiki.selfhtml.org/wiki/HTML/Mult…_Grafiken/audio

Also ohne geht auch nicht! Nur es sagt einem ja niemand, dass bei FF, mit der der neuen Version der Wert mindestens 40px sein muss.
:lol: ... wer weiß, wie viele Webdesigner mit verzweifeltem Gesichtsausdruck jetzt gerade vor ihrem Rechner sitzen und ihre verschwundenen Audioplayer suchen?

milupo
Ich habe deinen Vorschlag mal ausprobiert - leider ist, wie befürchtet, das Ergebnis nicht so besonders.
Habe beim IE11 mal die style Anweisungen im Audio Tag weggelassen - zum Vergleich (vorher nachher) sind die styles bei den ersten 4 Liedern allerdings noch vorhanden!

[Blockierte Grafik: http://www.commw.de/perm_sto/IE_beispiel.jpg]

Also: Firefox unterstützt das style-Attribut auch. Das Problem machen wohl eher die div-Elemente. Die style-Angaben für width: und height: werden an drei Stellen gemacht: in den beiden (warum zwei?) div-Elementen und im darin enthaltenen audio-Element. Ich habe jetzt die style-Angabe für width: und height: aus den div-Elementen entfernt und das style-Attribut mit den entsprechenden Werten wieder ins audio-Element eingefügt. Jetzt kann ich die Höhe anpassen und es funktioniert auch in Firefox. Ich kann die Höhe bis auf 6px herunterregulieren, bei 5px verschwindet dann die Abspielleiste, weil nicht mehr genug Platz ist. Bei meinem jetzigen Screenshot steht der Wert auf 10px.

[attachment=0]webacappella-2.png[/attachment]

Edge kennt übrigens den Audiodateityp nicht. Es kommt die Fehlermeldung "Dieser Audiodateityp wird nicht unterstützt."

ip61
Dann ist dein Problem ja jetzt (beinahe) gelöst. Du hast einen Weg gefunden HTML Code einzugeben, bzw HTML zu editieren.
Im Chrome, FireFox und Edge sieht es gut aus - nur der InternetExlorer (bei mir IE11) zeigt diese übergroßen Player an.
Wie ich das schon in meinem Beitrag weiter oben (Mi, 10. Mai 2017 10:34) festgestellt habe. Um das zu richten, wirst du nicht umhin kommen die Styledefinition in den Audio Tag mit aufzunehmen!

<audio style="width: 301px; height: 40px;" controls="controls">

Die anderen Browser verstehen das auch und als weiteren Vorteil werden dann alle Player gleich breit dargestellt.

Noch ein kleiner Hinweis! Der Fehlertext, wenn der Browser den HTML5 Audio nicht unterstützt, wird in schwarz ausgegeben. Das ist kaum zu entziffern auf dem Hintergrund:
Wenn du also eh schon dabei bist noch was zu ändern, dann wäre eine weiter Modifikation durchaus sinnvoll.

<span style="color: #ffffff;">Your browser does not support the audio tag.

macht die Schrift weiß!

Die Höhe sollte mindestens 16px betragen, dann ist alles voll sichtbar (zumindest bei mir hier): Der Abspielpfeil, die Abspielleiste, das Lautsprechersymbol und das Lautstärkesymbol

Edge bringt bei der neuen Seite den Fehler nicht mehr, dass angeblich der Audiodateityp nicht unterstützt wird. Die neue Seite wird in Edge ohne zu Murren abgespielt. Möglicherweise lag das an meinem Offline-Quelltext. Ich habe ja lokal nicht auf alles Zugriff.

milupo
Hast du eine andere Version von FF als die 53.0.2?
Bei mir wird weiterhin der Player im FF unsichtbar, wenn der height-Wert kleiner als 40px ist.
Und der Player sieht komplett anders aus!

[Blockierte Grafik: http://commw.de/perm_sto/ff_sample.jpg]

Nach meiner Beobachtung haben die beiden Div's keinen Einfluss auf das Aussehen und das Format des Players - egal, mit welchem style-Attribut die ausgestattet sind.
Das äußer Div ist die Positionierung (top und left) und sagt eben, wo der Inhalt (der Player) angezeigt wird.
Das innere Div ist so eine Geschichte von WebAcapella - dieser dient als Container für einen Flash-Audio-Player, der von dem direkt auf den Audio Tag folgenden Script eingeblendet werden soll. Warum?... das müsste man WebApokalypse mal fragen, denn wenn ich den Script richtig interpretiere, dann soll der Player gestartet werden wenn der InternetExplorer genutzt wird [ if(isMSIE...] ... totaler Quatsch und stammt wohl noch aus den Urzeiten des Internets.

Und der Edge spielt bei mir die mp.3's ohne Probleme.

Tatsächlich, da stand noch 52.0.2 drin. Ich nutze sonst den sorbischen Firefox und der ist 53.0.2. Ich habe auch nur meine Datei über das Kontextmenü --> Öffnen mit geöffnet. Da wurde der deutsche Firefox geöffnet. In 53.0.2 werden für meine Datei nun gar keine Audioplayer angezeigt, das heißt, sie erscheinen nur mal ganz kurz. Auch nicht für das von mir angepasste Beispiel.

In den div-Element waren die gleichen Angaben für width: und height wie n der style-Angabe vom audio-Element. width: und height: sind Größenangaben, keine Positionsangaben.

Aber es stimmt, mit Style-Attribut verschwindet der Audioplayer.

Zitat von sailor56

Und der Edge spielt bei mir die mp.3's ohne Probleme.

Ja, habe ich weiter oben schon geschrieben. Es ist eben doch ein Unterschied, ob man eine lokale Datei verwendet oder eine Webdatei.

Das Problem trat ja erst mit dem Update auf 53.0.2 auf! Die früheren FF Versionen zeigten dieses Phänomen des verschwindenden Audioplayers ja nicht.
Bei diesem WebAcapella Projekt geht der Code ziemlich durcheinander und die Änderungen, die ip61 im Rahmen der Fehlersuche gemacht hat, haben einige Dinge jetzt auch wieder verändert.
So ist z.B. das innere Div nicht mehr vorhanden - war aber eh überflüssig.
Das äußere Div, in dem der Player ja eingebettet ist, hat aber Positionsangaben...

<div class="wa-comp" style="position:absolute;z-index:10104;left:300px;top:944px;width:200px;height:50px;">

muss es auch haben, denn wie sonst soll der Browser wissen, wo er das Element positionieren soll?
position: absolute;
left: 300px;
top: 944px;

Es ging aber nicht um die Positionsangaben, sondern nur um width: und height: diese Angaben waren ursprünglich sowohl im äußeren div, im inneren div und im audio-Element. Dreimal dieselben Angaben. Mein Ansatz war ursprünglich - in der irrigen Annahme, dass ich mit 53.0.2 arbeite - nur! width: und height: aus den div-Angaben zu entfernen und das style-Attribut wieder in audio einzufügen. Und es hatte ja auch geklappt und sogar die Höhe konnte ich ändern. Aber 53.0.2 hat mir das alles wieder zunichte gemacht.

Ich habe jetzt versucht mit dem style-Element im Kopf der Datei zu tricksen, sprich, dass in audio nur controls steht und im style-Element dann audio {height: 20px;}. Aber auch das klappt nicht. Die Mindestgröße bleibt 40px; erst dann erscheint der Player.

So, es hilft uns nicht viel weiter, aber jetzt wissen wir, dass es kein Bug, sondern beabsichtigt ist, siehe hier:

https://developer.mozilla.org/en-US/docs/Lea…d_audio_content

Scrolle herunter bis zur Überschrift Displaying video text tracks und gehe vier Zeilen nach oben. Dort steht:

Zitat

The <audio> element doesn't support the width/height attributes — again, there is no visual component, so there is nothing to assign a width or height to.

Das stimmt - diese Angaben waren ursprünglich in den beiden Div vorhanden. Für die Darstellung des Players sind diese Angaben aber irrelevant. Der Player reagiert nur auf die eigene Formatierung.. oder eben das, was der Programmierer des Browsers vorgibt.
Hab da mal diese Konstellation 'Player in Div' in Code gefasst.

<!DOCTYPE html>
<html>
  <head>
    <title>Test HTML5 Audio Tag</title>
  </head>
  <body>


     <div style="width: 400px; height: 80px;  border: 2px solid #ff0000;">
        <audio style="width: 300px; height: 40px;" controls="controls" src="tracks/sample/Birthcontrol_Gamma_Ray.mp3" type="audio/mp3">
        Your Browser does not support the HTML5-Audio-Element.
        </audio>
     </div>
     <p>div width: 400px; height: 80px; mit Player width: 300px; height: 40px;</p>
     <br><br>


    <div style="width: 200px; height: 20px; border: 2px solid #ff0000;">
       <audio style="width: 300px; height: 40px;"  controls="controls" src="tracks/sample/Birthcontrol_Gamma_Ray.mp3" type="audio/mp3">
       Your Browser does not support the HTML5-Audio-Element.
       </audio>
    </div>
    <p>div width: 200px; height: 20px; mit Player width: 300px; height: 40px;</p>
    <br>


    <div style="width: 100px; height: 80px; border: 2px solid #ff0000;">
       <audio style="width: 300px; height: 40px;"  controls="controls" src="tracks/sample/Birthcontrol_Gamma_Ray.mp3" type="audio/mp3">
       Your Browser does not support the HTML5-Audio-Element.
       </audio>
    </div>
    <p>div width: 100px; height: 80px; mit Player width: 300px; height: 40px;</p>


  </body>
</html>

Und so sieht es aus - um die Div's ist zur besseren Erkennung ein roter Rahmen.

[Blockierte Grafik: http://www.commw.de/perm_sto/ff_demo_groesse.jpg]

Man kann zwar mit 'overflow: hidden;' die Anzeige des Players an den Grenzen des Div's abschneiden, aber man sieht dann auch nur diesen Abschnitt, die Größe des Players ändert sich dadurch nicht.

ip61: Falls du mal ganz viel Zeit hast, lies dir mal folgende Seite durch, die bescheibt, wie man sich mit HTML, CSS und JavaScript einen eigenen Audioplayer bauen kann. Oben und unten ist eine Schaltfläche zum Ansehen der Demo und eine für den Download des Quellcodes. Die Seite ist allerdings in Englisch und auch die Thematik ist vielleicht ein harter Brocken für dich, aber wenn du dir Zeit nimmst - am besten den Quellcode herunterladen und dann die Seite abarbeiten und was da an Text steht und an Beispielcode mit dem heruntergeladenen Quelltext vergleichen, um immer zu verstehen, was du da gerade machst bzw. machen musst. Du bist dann unabhängig von allen Einschränkungen und bist Herr über deine Gestaltungsvorstellungen.

http://r.osey.me/code/audio/