Adobe Edge Animate now supports native HTML5 audio with the <audio> element — making it possible to add sounds to your animation projects. Using basic HTML and JavaScript, you can control audio playback in compositions. You can also bind audio elements to touch and mouse events, as well as trigger audio playback on the timeline. The audio capabilities in Adobe Edge Animate are embedded in the HTML DOM. So sounds play on any computer or device without requiring a plug-in.

You can import the following audio types into Edge Animate:

  • .mp3
  • .ogg/.oga
  • .wav
  • .m4a
  • .aac

For the best cross-browser consistency, include .mp3 and .ogg resources of audio elements in your project. For a detailed description of supported audio types, visit Media formats supported by the HTML audio and video elements.

To create fallback versions of your audio file, you can use an audio conversion application such as Adobe Audition, which is included in your Creative Cloud membership. 

Add audio to compositions

Do one of the following:

  • Drag-and-drop the audio files into your project from your file system. An 'audio group' with the name of the audio file is created in the Library. This audio group contains the audio file and the fallback files for cross-browser compatibility.

Note: Fallback files get automatically grouped under the audio group when you drop them into the project.

Audio group in Library

  • Click Add Audio in your project Library and browse for the audio file. Then, drag the audio group to the stage. 
Add Media option in Library
Add Audio option in Library

After you add audio to your project, an 'audio element' appears in the Elements panel. When you select the audio element in the Elements panel, options to control the playback of your audio appear.

Audio in Elements panel
Audio in Elements panel

Play back and control audio

You can play back and control audio using any of the following options:

  • Properties panel
    • AutoPlay: Allows the audio file to automatically play on the timeline.
    • Loop: Makes the audio file loop from the beginning after it finishes playing.
Audio control options in the Properties panel

  • Timeline
    • Play: Plays the audio file from the current playhead position.
    • Play From: Allows you to specify the time marker you want to play from.
    • Pause: Allows you to pause the audio track. Use a play function to resume play back.
Audio control options in Timeline

  • Audio actions: Using code snippets in Actions to control audio playback through events.

Audio actions

  1. Click {} adjacent to the audio element on the timeline to open the Actions editor.

  2. From the list of events that appear, click the required trigger.

  3. In the Pick An Action list, click Audio, and then click the required action.

    Audio actions in Actions editor

  4. In the Pick A Target section, click Stage, and then double-click the element to which the action that you selected must apply. 

  5. If required, modify the code in the code window.

Important: Sometimes your audio plays perfectly fine locally, but fails to play after you load it to your Web server. In such cases, configure the .htaccess file of your Website to include the MIME types required for audio support. Contact your Website administrator for assistance.

Fine-tune audio

You can set keyframe transitions to control volume transitions in the timeline. Use volume transitions to create unique audio effects, such as, fade in, fade out, and cross-fading multiple tracks. 

Note:

Volume transitions for audio are not available on most mobile devices. See Using audio on devices for restrictions.

Preload audio

To preload audio files before the composition loads, select “Preload Audio” in the Preloading section of the Properties panel on stage.

Note: Preloading audio is not available on most mobile devices. See Using audio on devices for restrictions. 

Enable the default audio player

You can use the browser default Windows Media Player to show controls for your audio. The default audio player is hidden by default. To turn the display of the player on, select the audio element and select “On” in the Properties panel. 

Enabling default audio player
Enabling the default audio player

The player skin is rendered by the browsers, and appears different based on the browser it is viewed in. For example, the player you see in Chrome is different than the player you see in Firefox. See Audio actions to learn how to create custom controls that you can use to create your own player. 

When the player is viewed on stage, you can add motion and transform properties to the player like you add for other objects. Since <audio> elements are a special type of HTML element, only a subset of properties is available for you to apply:

  • Opacity
  • Clipping
  • Position and Size
  • Transform

Using audio on devices

iOS

In Safari on iOS (for all devices, including iPad), where users may be on a cellular network and be charged per data unit, preload, AutoPlay, and play back actions are disabled. No data is loaded until the user plays the audio.

You can use the Audio Actions to call an audio element triggered by a user event. For more information on audio actions, see Audio Actions.

Volume keyframes and control configured through the volume property are not supported on iOS devices. Users can adjust the volume using the volume control of the device itself.

Prior to iOS 4.0, iPhone and iPod touch did not play audio inline. Audio was presented in full-screen mode. Audio plays inline on iOS 4.0 and later on all devices. 

Android

Android generally has the same audio element limitations as iOS.

Tips and cross-browser considerations

Audio sync

Audio can be used to choreograph sound to your stage compositions. However, due to the nature of the Web, audio tracks can fall out-of-sync with elements moving on the stage. You may experience playback latency when coordinating movement with sound, especially in longer tracks. 

Audio Sprites

Using audio sprites allows you to create a single audio file with separate playable parts. This technique is used to download all your audio in a single file to save download time. 

To use an audio sprite, convert your audio element to a symbol and use play back markers to call the sections of your sprite. 

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy