801.796.BROS (2767)
Select Page

Audio in Adobe Edge Animate

One of the most common requests with Adobe Edge Animate I have seen from the very beginning has been the ability to play audio within HTML5 animations. Edge Animate does not natively support audio so it is not a simple import option like it is with Flash. Since audio is almost a necessity for eLearning, “How do I play audio in Adobe Edge Animate files?”

After testing out many different extensions I have come across my favorite way of playing audio which is Edge Commons. Edge Commons is great because not only can you play audio with it but you can also add on the ability to have different layouts for different screen sizes and much more. So let’s use Edge Commons for our eLearning audio.

Step 1 – Download Edge Commons Javascript Files

You can do this by going to the website http://cdn.edgecommons.org. Once there scroll down to the latest version of Edge commons which at the time of this writing is 1.0.1 and click the link that is in the “Download” section. This will download a zip folder with the Edge Commons javascript library that you can attach to any HTML file including Edge Animate files.

The folder that gets unzipped is a libs folder and has all the necessary files.

Step 2 – Create a Edge Project

The next thing you want to do is create and save an Edge Animate project in Edge or open up a project you already have. When you create that project you save it to somewhere on your desktop.

Audio in Adobe Edge Animate

 In that project you will see all the standard Edge Animate files.

Step 3: Add Edge Commons Projet to Your Main HTML File

From here open up the project you just created or the one you already have created and just drag and drop the libs folder into the main area. Now we just need to reference the path to the main Edge Commons javascript file in the main Edge Animate HTML file. So, depending on what you named your Edge Animate project find the main HTML file within your Edge Animate project and open that up in any text editor or HTML editor you may have.

You will need to attach both the Edge Commons CSS library and Javascript library just like you would with any additional CSS or Javascript, but add this after the <!–Adobe Edge Runtime End–> code or it may not work properly.

Here is the code you would add to reference the files in the libs folder.

<!-- EdgeCommons All-in-one -->
<script type="text/javascript" src="libs/EdgeCommons.js"></script>
<!-- EdgeCommons Spotlight CSS -->
<link href="libs/style.css" rel="stylesheet" />

Pin It on Pinterest