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. Eine Herausforderung besteht darin, dass moderne Browser Musik nicht einfach automatisch abspielen – deshalb ist ein wenig JavaScript erforderlich, und die Musik kann auch frühestenes beim Abschicken der ersten Seite starten.

Hinweis: Gehen Sie davon aus, dass die Befragten ihre Lautsprecher ausgeschaltet haben, sie erst einen Kopfhörer aufsetzen müssen oder das Smartphone auf stumm gestellt ist. Weisen Sie frühzeitig auf die Audio-Ausgabe hin und bieten sie im Fragebogen die Möglichkeit, die Audio-Ausgabe zu testen.

Ein Frameset definieren

Zu allererst müssen Sie ein Frameset 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 Datei direkt herunterladen.

start.html

<!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%" border="0">
	<frame src="./index.php" name="survey">
	<frame src="./music.html" name="music">
  </frameset>
</html>

Inhalt für das Frameset

Das Frameset verweise einmal auf den Fragebogen (index.php) und einmal auf eine Datei music.html. Diese Datei benötigen Sie ebenfalls.

music.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>Audio</title>
    <script>
    window.addEventListener("message",
        function(evt) {
            var audio = document.getElementById("bgAudio");
            var data = evt.data;
            if ("source" in data) {
                audio.src = data.source;
            }
            if (data.action === "play") {
                audio.play();
            }
            if (data.action === "stop") {
                audio.stop();
            }
        },
        false
    );
    </script>
</head>
<body>
    <audio id="bgAudio" preload loop style="position: absolute; left: -9999px; top: -9999px">
        <source src="stimulus.mp3">
    </audio>
</body>
</html>

Diese Datei beinhaltet ein <audio>-Element und bleibt die ganze Zeit über geöffnet. Am Ende der Datei finden Sie folgende Zeile. Ersetzen Sie hier das stimulus.mp3 durch den Dateinamen Ihrer Musikdatei.

<source src="stimulus.mp3">

Inhalte im Fragebogen verwenden

In SoSci Survey öffnen Sie Bilder und Mediendateien und dort den Karteireiter „Mediendateien“.

Laden Sie (1) die beiden HTML-Dateien von oben und (2) die mp3-Musikdatei(en) hoch, die Sie in Ihrem Fragebogen verwenden möchten.

Damit das Abspielen funktioniert, dürfen Sie beim Hochladen nicht die „geschützte Dateiablage“ verwenden.

Außerdem müssen Sie (3) unter Fragebogen zusammenstellen noch ein wenige JavaScript-Code einfügen. Ziehen Sie ein Element „HTML-Code“ auf die Fragebogen-Seite bevor die Musik starten soll und fügen Sie dort folgenden Inhalt ein.

<script>
function messageToMusic(msg) {
    var id = "music";
    if (parent.frames && parent.frames[id]) {
        var musicFrame = parent.frames[id];
    } else {
        return;
    }
    musicFrame.postMessage(msg);
}
 
SoSciTools.questionnaire.attachCheck(function() {
    messageToMusic({
        source: "Musik02.mp3",
        action: "play"
    });
    return true;
});
</script>

Dieser JavaScript-Code macht folgendes: Wenn die oder der Befragte auf den „Weiter“-Knopf klickt (SoSciTools.questionnaire.attachCheck()), dann wird eine Nachricht an das Fenster mit der Musik-Datei gesendet. Diese Nachricht wird vom JavaScript in der music.html verarbeitet, und startet das Abspielen der Musik.

Beachten Sie die folgenden Zeilen am Ende der Datei.

messageToMusic({
    source: "Musik02.mp3",
    action: "play"
});

Mit dem Eintrag source kann (optional) eine andere Audiodatei geladen werden. Dieser Eintrag kann weggelassen werden, wenn Sie die Audio-Datei nicht variieren müssen.

messageToMusic({
    action: "play"
});

Falls Sie die Audio-Datei experimentell variieren, können sie hier auch einen Platzhalter einsetzen. Mehr dazu unter Randomisierung von Bildern mittels Platzhalter.

messageToMusic({
    source: "%filename%",
    action: "play"
});

Mit dem Eintrag action teilen Sie mit, ob das Abspielen starten (play) oder stoppen (stop) soll.

Befragungszeitraum starten

Damit der Link funktioniert, sorgen Sie in den Projekt-Einstellungen dafür, dass der Fragebogen online erreichbar ist.

Alternativ können Sie in der Datei start.html einen Pretest-Link eintragen, indem Sie folgende Zeile anpassen:

<frame src="./index.php" name="survey">

Ersetzen Sie hier das ./index.php durch den Pretest-Link, wenn Sie den Fragebogen noch nicht regulär online stellen können oder möchten. Vergessen Sie nicht, die geänderte Datei hochzuladen und die Datei zum Start der Erhebung wieder zu ändern.

Fragebogen aufrufen

Damit das Frameset mit den zwei Bestandteilen (Fragebogen und Datei mit dem <audio>-Element) geladen wird, verwenden Sie nicht den „normalen“ Link zum Fragebogen

  https://www.soscisurvey.de/PROJEKT/

sondern ergänzen Sie am Ende ein start.html, also

  https://www.soscisurvey.de/PROJEKT/start.html

Statt PROJEKT müssen Sie natürlich das Projektverzeichnis Ihres Befragungsprojekts einsetzen (Der Link zum Fragebogen). Diesen Link können Sie nun in die Adresszeile des Browsers eintragen, um die Hintergrundmusik zu testen. Diesen ergänzten Link verwenden Sie später auch an die Adressat:innen Ihrer Studie.

Wichtig: Das start.html ergänzen Sie nicht in SoSci Survey, sondern Sie geben es einfach nur in der Adresszeile Ihres Browsers ein.

Sollte die Datei nicht abspielen, öffnen Sie nach dem Aufruf der start.html die Entwickler-Tools im Browser und prüfen Sie, ob dort Fehlermeldungen angezeigt werden.

Einschränkungen

Beim Aufrufen des Frameset können Sie keine Variablen (z.B. Referenz oder Teilnahmecode) an den Fragebogen übermitteln, wie unter Der Link zum Fragebogen beschrieben.
Es ist mit dieser Lösung nur mit usätzlichem Aufwand möglich, die Musik am Ende auszublenden. Ansonsten endet das Abspielen beim Senden der stop-Nachricht abrupt.