Add a sound file to your animation

Tip
Adding sound to your animation can mean quite an extra effort. You may consider not doing audio at all. As an alternative, you may consider using subtitles in your gif animation, or just adding some introductory text or script next to the animation.

To create a soundfile you will use sound recording software and a microphone.

Note
Windows includes very basic recording software, called the Sound Recorder. The Windows Sound Recorder stores the recording as a Windows Media Audio file (.wma), which is not suitable for use on the web. However there are several online converters, for example http://media.io/

Preparing the text for the recording

  1. Write down in steps what your recording is showing - if you had not already done so before,
  2. For each step decide on a suitable text, put each step on a seperate line,
  3. Dry run the text together with your animation to see if it will fit. Make changes if required.

recording the animated gif audio

After preparing the text you want to record and testing it on the animation you can start the actual recording:

  1. Open your gif animation in the Animated Gif Editor
  2. Select an image frame in the list to stop the animation
  3. Simultaneously start the recorder and switch the editor to Showbutton show in the editor
  4. Read the text aloud, making sure the text matches what is currently shown in the animation.
  5. When the animation is finished, stop the sound recorder.
  6. Save the recording under the same name and location as the gif file.

Convert recording to usable audio file format

Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:

Browser MP3 Wav Ogg
Internet Explorer 9 YES YES YES
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES
Tip
mp3's are MUCH smaller than wav's, a good reason to use them.
Warning

mp3's are not supported by FireFox

Make HTML page with Gif and Audio