June 4, 2015

HOW-TO: Add Sound to your App Demo

Quick intro

With the Audio control you have 2 possibilities to add narration to your demo:

  • using the Text-to-Speech functionality
  • uploading audio files

Click through the demo on the right to see how the Text-to-Speech functionality works.

How it works

1 Text to speech Scenario

First add an Audio control to a demo screen.

Then type the text that you want spoken in the section Text to speech. The voice will differ depending on the browser.

Finetuning the spoken text:

  • Use punctuation such as "." and "," in your text
  • Adjust the speed using the SPEED property
  • Adjust the pitch of the voice using the PITCH property
  • Use the DELAY property to make the voice start speaking after some time

Browser support: The Text-to-speech functionality is only supported in Chrome and Safari.

2 Uploaded Audio File Scenario

Add an Audio control to a demo screen. Then click the Upload file button and select an audio file from the disk.

All standard audio files are supported but please note that there are some browser limitations (summarised in the table below).

Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Audio Files Browser Support

As you can see, the best browser support is for mp3 files - by using mp3 files into your demo you can make sure they will be played in all browsers.

Important notes about playing audio files on mobile devices

In general, on mobile devices there's often a lag when playing audio files - depending on how fast the internet connection is. In order to minimize this lag you have to make sure that the audio file sizes are as small as possible. For example, an audio file of a few seconds can have a few MB in size - loading that file on mobile will definitely be slow!

You can try different quality settings (e.g. 128 / 64 / 32 kbps) to significantly lower the file size without affecting how the audio hears. Often, a lower quality audio (e.g. 32 kbps) sounds just as well as a high quality one, even with a significantly smaller file size – a few KBs – and it also loads much faster.

This short guide will teach you how to Compress your audio files with Audacity.