Audio Files in the Questionnaire

Important: Read the advice in Media Files in Questionnaires (Audio, Video, Documents) before this manual.

There are several file formats that are suitable for use online. Usually, mp3 is used because this is the format compatible with the most browsers (Mozilla: Browser Support).

Note: The solutions below will play the audio file on one specific questionnaire page. When clicking to the next page, it stops. If you need to bypass this restriction, please read Play music along several pages.

If an audio file is saved in mp3 format and uploaded to the host server, it can simply be dragged into the questionnaire like a text element (Compose Questionnaire). With the display settings , you may configure the audio element to start playing automatically.

Since the HTML5 tag <audio> has become quite common now, it is well suited for embedding audio files. Only very outdated browsers (e.g. Internet Explorer older than version 9) do not support this tag.

In order to make sure the audio file is played in all contemporary browsers, it should be present in mp3 and ogg format. However, mp3 alone already provides a decent coverage. There is a number of free tools available for conversion into compressed file formats, such as the Open Source Audio Editor Audacity when used together with LAME.

To embed a file, create a new Text element in Text Elements and Labels with Formatting “HTML code”, and add the following content:

<audio id="audio_with_controls" preload="auto" autoplay controls controlsList="​nodownload"​>
controls controlsList="​nodownload"​>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  Your browser is not able to play this audio file 
</audio>

The file name(s) are entered in the <source> tags, while the options controls and autoplay enable controls and automatic playback. For more options, see w3schools: Audio.

CSS formatting can be used to either adjust player size or to hide the player entirely. Please keep in mind that some browsers might ignore the autoplay setting, e.g. on mobile devices with limited data usage).

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

<audio id="audio03" controls ​controlsList="​nodownload" ​style="​position:​ absolute; left: -9999px; top: -9999px">​
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

Note: Most mobile devices (smartphones, some tablets) and sometimes the desktop version of Safari block the autoplay function to play a media file (audio or video) automatically. In this case, you should provide a JavaScript that displays the control elements after a short time if the media file does not start. For example:

<audio id="audio04" preload controlsList="nodownload" autoplay>
  <source src="someAudio.mp3">
</audio>
<script type="text/javascript">
<!--
window.addEventListener("load", function() {
  window.setTimeout(function() {
    var audio = document.getElementById("audio04");
    if (audio.paused) {
      audio.setAttribute("controls", "yes");
    }
  }, 250);
});
// -->
</script>

JavaScript can be used to further refine the control of the audio file. For example, you can use the JavaScript event ended to automatically forward to the next page after the audio file has been played.

<audio id="audio05" preload controlsList="nodownload" autoplay>
  <source src="someAudio.mp3">
</audio>
<script type="text/javascript">
<!--
window.addEventListener("load", function() {
  window.setTimeout(function() {
    // Identify audio element by ID
    var audio = document.getElementById("audio05");
    // Show controls if the video does not start automatically
    if (audio.paused) {
      audio.setAttribute("controls", "yes");
    }
    // Automatically continues to the next page after playback
    audio.addEventListener("ended", SoSciTools.submitPage);
  }, 250);
});
// -->
</script>

Tip: If the embedded video does not play correctly, take a look at your browser's error console.

If the audio stimulus is not only intended to convey music or speech, but also the finest nuances, then lossy mp3 compression can become a problem. This is not optimised to compress the knocking of a woodpecker, for example.

However, lossless audio compression is not so trivial in the context of an online survey:

• The uncompressed PCM format (WAV files) is not supported by the outdated Internet Explorer (which is nevertheless frequently used) (Can I Use: WAV), but above all the format requires a lot of storage space. SoSci Survey therefore does not allow uploads for WAV files.
• A lossless compressed alternative to the WAV format is FLAC (Mozilla: Audio Codecs). Here, too, Internet Explorer is left out and may need an additional alternative offered – but at least the format does not waste unnecessary storage space and bandwidth for the respondents.
• A third option is mp3 files that are compressed at a very high quality (e.g. 320kbps). These are played by all browsers and with a high bit rate, far fewer aspects of the audio signal are removed than with standard compression at 128kbps.

Please note that there are further limits to authentic reproduction in online surveys. As a rule, the work computer is not a recording studio.

• Some respondents cannot hear any audio signal at all, e.g. because they are in an open-plan office or because no speakers or headphones are connected to the computer.
• Other respondents can only hear the audio with relevant background noise, for example on public transport. And even at home, undisturbed listening enjoyment is often not guaranteed: Family members are present, the neighbour is mowing the lawn or the parcel carrier is ringing…
• Most respondents will only have poor audio hardware at home that cannot reproduce low tones and does not deliver a straight frequency response.
• If Bluetooth headphones are used, the signal between the computer and the headphones is potentially compressed again with a loss.