(Last Updated: November 13, 2017)

Saola Animate supports the HTML5 <audio> element, enabling native audio playback within the browser. In this article, we’ll learn the ways to add audio to HTML5 animation. Then we’ll finish off by looking at the multiple sources feature Saola Animate offers. Let’s check it out!

Add Audio to HTML5 Animation

Saola Animate makes it simple to embed audio in a web page using the HTML5 <audio> element. It supports a wide range of audio formats, including MP3, WAV, M4A, AAC, OGG, OGA.

Generally, the ways to add audio to HTML5 animation are the same as those used for adding images. You can drag and drop or import many audio files at once.

To prepare audio in advance, import them into the Resources pane of your document. After that, drag and drop audio resources onto the Canvas to create audio elements. Perform one of the following:

  • Drag and drop audio into the pane.
  • In the Resources pane, click the Import button to import audio.

add audio to html5 animation 1

Alternatively, you can directly create an audio element on the Canvas. Do either of the following:

  • Drag and drop audio onto the Canvas.
  • Copy and paste audio from your computer.
  • On the toolbar, click the Audio button and choose audio from your computer.

add audio to html5 animation 2

Note: It’s possible to rename or remove an audio element on the Canvas, in the Timeline or the Elements panes without affecting the matching audio resource in the Resources pane. That is, you delete an audio element on the Canvas, but its matching resource still remains in the Resources pane. If you want to completely remove an audio, delete all elements associated with it. Then, delete the resource file from the Resources pane.

Playback Options

Audio elements have their unique playback attributes. These attributes appear in the Media section of the Properties pane.

add audio to html5 animation 3

  • Source: Name of the audio.
  • Duration: Duration of the audio in milliseconds.
  • Volume: Set the volume of the audio in the range [0, 100%]. This property is animatable.
  • Autoplay: Make the audio automatically play once it is ready.
  • Loop: Continuously play the audio in a loop.
  • Controls: Display the built-in player controls to control audio playback. This is selected by default.
  • Preload: Preload the audio before the document loads. This is selected by default.

Multiple Audio Sources for Audio Elements

HTML5 <audio> element allows you to play audio directly through the browser, without requiring a plug-in. But the fact is that different browsers support different audio formats. Fortunately, the <audio> element allows you to list different formats of the same audio file. That way, you provide multiple formats so that a browser can pick the most compatible it supports.

Saola Animate embeds audio by using the HTML5 <audio> element. Each audio has an audio group to which you can add other formats. Including just MP3 is enough for modern browsers supporting HTML5 <audio>. But for the broadest browser compatibility, you can provide MP3 and OGG files for each audio group.

Tip: For information on browser support for different audio formats, see Media formats for HTML audio and video on MDN. You can also get the latest information on browser compatibility on caniuse.com.

To add audio formats to the audio group, access the Resources pane. Then, click to select an audio resource. The Media Files widget appears allowing you to add (1), remove (2), export (3), and preview (4) different audio formats.

add audio to html5 animation 4

Note:

  • When adding a new format to a group, if the format has already existed, Saola Animate will ask you to overwrite it.
  • If a group contains only one audio format, you cannot remove it.

So you’ve learned the ways to add audio to HTML5 animation. The next step is to control audio playback properly and this topic will be covered in the coming article. Don’t forget to follow our blog to receive email notifications for new posts. Try Saola Animate today and create compelling HTML5 animation.

Join our mailing list to receive the latest news and updates from our team.

A confirmation email has been sent to your mailbox, please confirm your subscription!

Pin It on Pinterest