Saola Animate supports the HTML5 audio element, enabling native audio playback within the browser. In this tutorial, 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!
This tutorial covers:
Adding 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.
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.
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.
Audio elements have their unique playback attributes. These attributes appear in the Media section of the Properties pane.
- 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.
- 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 tutorial. Don’t forget to follow our blog to receive email notifications for new posts.