Layout Mediendateien ädern

Question

Guten Tag liebes SoSci-Team,

ich hätte eine Frage zum Layout.

Ich bereite gerade eine linguistische Untersuchung vor, bei der die Probanden verschiedene Tonaufnahmen vergleichen sollen. Da ich zu den Aufnahmen verschiedene Fragen stellen muss, brauche ich ein passendes und möglichst deutlichstes Layout, wo ich die Fragen und die Dateien graphisch beliebig kombinieren kann. Kann man überhaupt mehrere Elemente in der selben "Reihe" haben?

Am besten würde ich zwei Audio-Dateien und zwei Fragen nebeneinander in der selben Reihe haben. Und eine dritte Frage ganz am Ende. Also so etwa:

Audio 1         -     Audio 2             Frage 1            Frage 2

                                                                                                  ] 
                                                                                                     Frage 3    
                                                                                                  ]

Audio 3         -     Audio 4             Frage 1            Frage 2

Vielen Dank!

Answer 1

Sie werden ein wenig darauf achten müssen, dass das Ganze auf dem Bildschirm nicht überladen wirkt. Vor allem sollten Sie auch in Betracht ziehen, dass vielleicht jemand auf einem kleinen Bildschirm (Tablet) an der Befragung teilnehmen möchte.

Prinzipiell ist es aber kein Problem: Elemente nebeneinander platzieren

Comments

Vielen Dank!

Kann man die Breite der Tondateien-Item reduzieren, sodass mehrere Elemente reinpassen?

---

Es kommt ein wenig darauf an, welchen HTML-Code Sie zum Abspielen der Audio-Dateien verwenden. Beim empfohlenen HTML 5 können Sie einfach eine Breite angeben:

<audio style="width: 60px" ...>

Was genau der Browser daraus macht, variiert je nach Browser. Prinzipiell können Sie den Player auch komplett ausblenden und nur einen Play-Button anzeigen, den Sie dann mittels JavaScript an den (unsichtbaren) Player koppeln.

---

Danke.

Mit   <audio style=„width: 60px“...      kann man aber nur die Position auf der Seite programmieren. Wie kann ich die Größe des Players verändern und möglichst klein machen?

---

Nein, diese Einstellung ändert nur die Breite des Players, nicht die Position. Wenn sich an der Position etwas ändert, dann ist das nur ein Nebeneffekt der Breite.

---

Leider klappt es nicht. Ich mache bestimmt was falsch, aber ich verstehe nicht, was.

Hier ist das HTML-Code, das ich ursprünglich hatte (und das übrigens das einzige ist, was ich im Feld “Inhalt” angegeben habe).

<audio id="audio01" controls  controlsList="nodownload" audio ="width: 200px; height: 80px">
  <source src="ULBERSDORF_definitivo_1.mp3" type="audio/mpeg" />
</audio>

Hier ist das Code, das ich geändert habe um das Tondatei-Item entsprechend zu verändern (=kleiner zu machen):

<audio id="audio01" controls  controlsList="nodownload" audio ="width: 60px; height: 60px">
  <source src="ULBERSDORF_definitivo_1.mp3" type="audio/mpeg" />
</audio>


Egal mit welchem Code ich die Einstellungen speichere, das Item bleibt immer genau so groß.

Wie kann ich das richtig hinkriegen?

Vielen Dank

---

Das Attribute heißt "style", nicht "audio":

<audio id="audio01" controls  controlsList="nodownload" style="width: 60px; height: 60px">

---

Nun habe ich es geschafft, alle Elemente passen auf der Seite.
Auf dem Tablett sieht alles gut aus, am Laptop ist es hingegen meistens etwas gedrängt. Können Sie mir bitte sagen, woran das liegt (zum Beispiel am Browser, dann könnte ich den Teilnehmern sagen  „ lieber Explorer benutzen oder so”).
Bzw. Kann ich das irgendwie ändern und verbessern, damit es auf allen Geräten perfekt ist?

Vielen Dank

---

Sie können die Breite auch prozentual angeben, z.B: width: 50%; - oder prinzipiell können Sie mittels CSS media queries auch je nach verfügbarer Bildschirmbreite eine andere Größe definieren.

Von einer Empfehlung, welchen Browser man zum Ausfüllen verwenden soll, rate ich ab. Zum einen zeigt das nur, dass Sie die Technik nicht im Griff haben (und wie lässt Sie das als Forscher dastehen?), zum anderen wissen viele Internetnutzer nicht einmal, was es mit den unterschiedlichen Browsern auf sich hat.

---

Ich werde es versuchen, vielen Dank.