Audio in LimeSurvey

If you have suggestions on how to improve this document, or find mistakes, please send them to labman.gw@nulluu.nl

Introduction

Adding audio to web pages used to be quite cumbersome, but thanks to the new HTML5-standard things have become quite a lot easier now. One of the new things in HTML5 is the <audio>-tag, which allows you to add an audio fragment without problems. This how-to describes adding audio playback to LimeSurvey.

The HTML5-standard

HTML5 is the new HTML specification for web browsers: it basically states what tags are supported and how they should function. The major internet browsers (Internet Explorer, Mozilla Firefox, Google Chrome) are rapidly implementing this standard. Do note that older browser versions do not support HTML5 elements, e.g., Internet Explorer 8 does not support HTML5. You can check this page for current browser support.

Also, note that not all file types are supported. Of the major file types, only .mp3 and .aac are supported in all major browser, see this Wikipedia article. For your current browser, you can check which file types are supported via this website.

The audio tag

The HTML5 audio tag allows to add audio fragments on a web site. The basic usage is as follows (note the source file extension and the type should match):

<audio controls>
  <source src="url.mp3" type="audio/mp3">
</audio>

Which renders what’s shown here. As is stated in the specifications (e.g. here), you can add several attributes to the audio element:

• autoplay: autoplays the audio fragment
• controls: adds a control element (you’ll probably want that)
• loop: automatically loops the audio fragment
• muted: mutes the audio fragment

You might also add a message when the browser does not support the audio tag:

<audio controls>
  <source src="url.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

Using the audio tag in LimeSurvey

We can use the audio tag to add audio fragments to LimeSurvey. Suppose that you would like to have a question in which people have to choose between two pronunciations of a word. The first pronunciation is played automatically, and the participant can start the second one after that himself. He is also allowed to play back the first sound. Let’s create a sample question for this:

1. Create a new question with type “List (radio)”
2. Go to the answer options page.
3. Click the pencil to open a graphical editor for your answer option.
4. Click “Source” to switch to the HTML view of the editor.
5. Add your code for the audio fragment. Make sure to add the autoplay and controls attribute for the audio tag.
6. In the source element, you can link to a URL all over the internet, but let’s here suppose that you want to upload your audio. We’ll need a small work-around for this:
   • Click the “Source” button to switch back to the graphical editor
   • Click the “Image” button (top right menu, leftmost option)
   • Click the “Upload” tab
   • Select your file and click “Send it to the Server”
   • Click the “Image info” tab
   • Copy what’s in the URL input field
   • Click the “Cancel” button
   • Click the “Source” button to switch back to the HTML editor
   • Paste the URL in the <source>-tag, src attribute
7. Add a new answer option and repeat steps 3-6. Make sure to not set the autoplay option this time.
8. You’re finished!

Some last hints

• Be sure to add an example audio fragment in the introduction of your survey. If your respondent can’t play the audio, he should of course not continue the survey. You can ask him to update his browser or use a different browser.
• The “autoplay” functionality does not work by default on mobiles and tablets. This is to limit cellular data usage. In Google Chrome, users can set a flag to autoplay audio nonetheless, but of course you can’t be sure a user has activated this.
• You can probably do stuff like “if fragment one finishes, start the next fragment”, but this is not supported out-of-the-box. If you do manage to get something like that working, be sure to inform us :-).
• Finally, note that while you’re able to measure reaction times with LimeSurvey (check this how-to), you will certainly get better results in an experimental environment.