Play music along several pages

SoSci Survey offers the possibility to display music or a video over an entire questionnaire using a frameset. One challenge is that modern browsers do not simply play music automatically – so a little JavaScript is required, and the music may also start earliest when the first page is submitted.

Note: Assume that respondents have their speakers turned off, they need to put on headphones first, or their smartphone is on mute. Point out the audio output at an early stage and offer the opportunity to test the audio output in the questionnaire.

Define a frameset

The first step is to create a frameset. Click SelfHTML: Frames to see what a frameset is. Loosley speaking a frameset is a table, which devides a website into areas, whereas the contents can be worked on individually.

To generate a frameset in SoSci Survey a text file has to be created on the desktop. Name it e.g. “start.html”.

Important: It is crucial saving the file as a pure ASCII-text. Due to this it is necessary to use a text editor (e.g. Notepad++, SciTE or Windows note pad) but no word processor such as MS Word or OpenOffice/LibreOffice.

Important: Take care that the file extension is changed respectively, converting the former text file into an html-file. You can download the contents of this file directly.

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>Questionnaire</title>
  </head>
  <frameset rows="99%, 1%" border="0">
       <frame src="./index.php" name="survey">
       <frame src="./music.html" name="music">
  </frameset>
</html>

Content for the frameset

The frameset refers once to the questionnaire (‘'index.php’') and once to a file ‘'music.html’'. You will also need this file.

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>

This file contains an ‘’<audio>‘’ element and remains open the entire time. At the end of the file you will find the following line. Replace the ‘'stimulus.mp3’' here with the file name of your music file.

<source src="stimulus.mp3">

Use content in the questionnaire

In SoSci Survey, open Images and media files and then the “Media files” tab.

Upload (1) the two HTML files from above and (2) the mp3 music file(s) you want to use in your questionnaire.

In order for the playback to work, you must not use the “protected file storage” when uploading.

In addition, you must (3) insert a little JavaScript code under Compile questionnaire. Drag an “HTML code” element onto the questionnaire page before the music is to start and insert the following content there.

<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>

This JavaScript code does the following: When the respondent clicks on the “Next” button (‘'SoSciTools.questionnaire.attachCheck()’'), a message is sent to the window with the music file. This message is processed by the JavaScript in music.html and starts playing the music.

Note the following lines at the end of the file.

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

The ‘'source’' entry can be used to (optionally) load a different audio file. This entry can be omitted if you do not need to vary the audio file.

messageToMusic({
    action: "play"
});

If you vary the audio file experimentally, you can also use a placeholder here. For more information, see Randomization of images using placeholders.

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

Use the action entry to specify whether playback should start (play) or stop (stop).

Start survey period

To ensure that the link works, make sure that the questionnaire is accessible online in the project settings.

Alternatively, you can enter a pretest link in the start.html file by adapting the following line:

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

Replace the ./index.php here with the pretest link if you cannot or do not want to put the questionnaire online regularly yet. Don't forget to upload the modified file and change it again at the start of the survey.

Accessing the questionnaire

To load the frameset with the two components (questionnaire and file with the <audio> element), do not use the “normal” link to the questionnaire

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

but add a start.html at the end, i.e.

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

Instead of PROJEKT, you must of course use the project directory of your survey project (URL to the Questionnaire). You can now enter this link in the address bar of the browser to test the background music. You will also use this added link later for the addressees of your study.

Important: Do not add the ‘'start.html’' in SoSci Survey, but simply enter it in the address bar of your browser.

If the file does not play, open the Developer Tools in the Browser after calling the start.html and check whether error messages are displayed there.

Limitations

* When calling up the frameset, you cannot transmit any variables (e.g. reference or participation code) to the questionnaire, as described under URL to the Questionnaire.

* With this solution, it is only possible to fade out the music at the end with additional effort. Otherwise, playback ends abruptly when the ‘'stop’' message is sent.

Table of Contents