Musik über mehrere Seiten hinweg abspielen

SoSci Survey bietet die Möglichkeit mithilfe eines Framesets Musik oder ein Video über einen gesamten Fragebogen hinweg darzubieten. Wie das geht erklärt folgende Anleitung¹⁾.

Ein Frameset definieren

Zu allererst müssen Sie ein Frameset innerhalb von SoSci Survey anlegen. Was genau man unter einem Frameset versteht ist hier nachzulesen: SelfHTML: Frames. Grob gesagt ist ein Frameset eine Art Tabelle, die die angezeigte Website in einzelne Bereiche aufteilt, deren Inhalte individuell bearbeitet werden können.

Um ein Frameset in SoSci Survey zu zu erstellen, muss zunächst eine Textdatei auf dem eigenen Desktop angelegt werden. Diese Textdatei wird dann z.B. „Start.html“ benannt.

Wichtig: Es ist essenziell, dass die Datei als reiner ASCII-Text gespeichert wird. Verwenden Sie daher zum Erstellen/Bearbeiten der Datei einen Texteditor (z.B. Notepad++, SciTE oder das Windows-eigene Notepad) und kein Textbearbeitungsprogramm wie Word oder OpenOffice.

Wichtig: Achten Sie darauf, dass die Dateiendung entsprechend geändert wird, sodass aus der ehemaligen Textdatei eine HTML-Datei wird. Sie können den Inhalt dieser dann mittels Editor anpassen. Innerhalb der Datei muss nun folgender HTML Code stehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Fragebogen</title>
  </head>
  <frameset rows="99%, 1%">
    <frame src="https://www.soscisurvey.de/PROJEKT/" name="survey">
    <frame name="Beispielframe">
  </frameset>
</html>

Achten Sie auf die Zeile <frame src=… – hier müssen Sie ihre individuelle Fragebogen-URL eintragen (Der Link zum Fragebogen), um in einem Frame den Fragebogen zu starten. Den eigenen Bedürfnissen entsprechend können Sie außerdem folgende Veränderungen im Code vornehmen:

Das Attribut rows kann durch cols ersetzt werden, um statt einer Aufteilung der angezeigten Seite in Zeilen (Frames untereinander) eine Aufteilung in Spalten (Frames nebeneinander) zu erhalten.
Die prozentuale Aufteilung der Bereiche kann angepasst werden.
Die Frames können anders benannt werden (Attribut name).
Es können weitere Frames hinzugefügt werden – beachten Sie dabei aber, dass sich die Spalten- bzw. Reihenprozente insgesamt zu 100 addieren.
Mit dem Befehl border="0" können die Rahmen um die einzelnen Frames entfernt werden.

Nachdem Sie die Datei angelegt und fertig bearbeitet haben, können Sie diese unter Bilder und Mediendateien in Ihr Projektverzeichnis hochladen. Sie können das Ergebnis nun betrachten, indem sie an die URL Ihres Projektverzeichnis noch /start.html anhängen, z.B. https://www.soscisurvey.de/PROJEKT/start.html

Wichtig: Verwenden Sie beim Hochladen nicht die geschützte Dateiablage!

Frameinhalte vorbereiten

Zunächst müssen Sie sich entscheiden, was für Inhalte in einen Frame geladen werden sollen. Der Frame sollte natürlich bei einem Video entsprechend groß sein, damit dieses komplett zu sehen ist. Bei Musik so klein wie möglich, um den eigentlichen Fragebogen nicht zu sehr zu verdecken. Wenn sie wissen, welcher Inhalt in den Frame geladen werden soll, müssen Sie für diesen erneut eine Text- bzw. HTML-Datei auf dem Desktop anlegen, z.B. play.html. Nun editieren Sie diese Datei und füllen sie mit dem HTML Code, welcher Ihren Inhalt abspielt. Hier am Beispiel für Musik:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Audio</title>
  </head>
  <body>
    <audio id="bgAudio01" preload autoplay>
      <source src="BEISPIEL.MP3">
    </audio>
  </body>
</html>

Hier wurde die Audio-Datei über das <audio>-Tag eingebunden, was mittlerweile viele Browser unterstützen. Eine Einbindung mittels Flash-Player wird unter Mediendateien im Fragebogen (Audio, Video, Dokumente) beschrieben.

Die Musikdatei (Hier „BEISPIEL.MP3“) müssen Sie natürlich ebenfalls in SoSci Survey hochladen. Damit kein Player mehr angezeigt wird, sondern die Musik quasi unsichtbar im Hintergrund läuft, können Sie die (Pixel-)Größe des Players auf 0 setzen (im Beispiel: 110 Pixel). Die editierte Datei laden Sie nun auch in Ihr Projektverzeichnis hoch.

Frame-Inhalte laden

Womöglich möchten Sie die Audio-Datei nicht sofort zu Beginn des Fragebogens abspielen, sondern erst ab einer bestimmten Seite. Dafür laden sie die eben angelegte Datei play.html via JavaScript in das kleine Frame. Um das zu erreichen, legen Sie unter Textbausteine und Beschriftung einen neuen Textbaustein mit folgendem HTML-Inhalt an:

<script type="text/javascript">
<!--
top.Beispielframe.location.href = "play.html";
// -->
</script>

Wenn Sie diesen Textbaustein nun auf einer Ihrer Fragebogen-Seite einfügen, wird automatisch der Inhalt des Frames verändert und ihre Musik oder Ihr Video hineingeladen.

Frame-Inhalte entfernen

Um den Frame wieder zu leeren und die Musik verstummen zu lassen, laden Sie einfach eine leere HTML Seite in ihren Frame. Am besten legen Sie dazu ein leeres HTML Dokument auf ihrem Desktop an, welches Sie leer.html benennen. Wie der Name schon sagt, lassen Sie diese Datei leer und laden sie dann so hoch. Sie können nun mit folgendem Befehl die Musik stoppen.

<script type="text/javascript">
<!--
top.Beispielframe.location.href = "leer.html";
// -->
</script>

Einschränkungen

Beim Aufrufen des Frameset können Sie keine Variablen (z.B. Referenz oder Seriennummer) an den Fragebogen übermitteln, wie unter Der Link zum Fragebogen beschrieben.
Es ist mit dieser Lösung nicht möglich, die Musik am Ende auszublenden, sie endet beim Laden der leeren Datei einfach abrupt.

¹⁾

Danke an Sebastian Brand für dieses Kapitel.