Inhaltsverzeichnis

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.

Simple embedding of an mp3

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 Einstellungen, you may configure the audio element to start playing automatically.

Embedding of an mp3 using HTML5

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.

Notes on listening studies

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:

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