On the PhoneGap Build forum, someone was inquiring about how to have an Edge Animate animation play audio when used within a PhoneGap application. For those who are not familiar with Edge Animate, it is an animation design tool from Adobe that uses web standards for the animations. Their most recent release added the ability play audio with the animation.
Since I am familiar with both tools, I thought I would create a simple demonstration of how to have an Edge Animate composition working in PhoneGap.
Although HTML5 does have an <audio> element, PhoneGap’s web view will not enable the audio to function. Instead we will need to rely on the Media API to do the actual audio playback.
I first created a simple animation. A cloud floating across the screen, and when the Starling bird is tapped, it will play a tweet sound effect, and fly off screen. Once I have my animation completed, the next step is to publish it for the web.
We can now make some various edits to the index.html file and the index_edgeActions.js file.
Let’s update the index.html file first.
Within the <head> portion of the file, include a meta viewport element. This will ensure that the webview will be properly sized.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Next, we need to include the reference to the PhoneGap library. Add the following at the end of the <head> section.
<script src="phonegap.js"></script>
Go ahead and save this file.
Now, we need to make some changes to the index_edgeActions.js file. Depending on how complex your animation is this file might be quite complex, but I kept this animation very simple so you can understand what you have to modify.
We first need to comment out the audio playback calls that Edge Animate uses. Comment out this line of JavaScript:
sym.$("tweet")[0].play();
Now add this JavaScript:
playPGAudio(getPhoneGapPath() + 'audio/tweet.mp3');
For your animation will need to locate all the instances where Edge Animate plays audio and make the change from calling it’s playAudio function to our PhoneGap friendly audio function. This sample animation only has one audio event.
This new function will use the Media API plugin to play the audio instead. At the end of the file, we need to add two functions. The first function is the playPGAudio. Since the Edge Animate library already uses playAudio, we need to have our function use a different name.
This function will take the url of our media file, then trigger the play method.
// Play audio
//
function playPGAudio(url) {
// Play the audio file at url
console.log('playPGAudio');
var my_media = new Media(url,
// success callback
function () {
console.log("playAudio():Audio Success");
},
// error callback
function (err) {
console.log("playAudio():Audio Error: " + err);
}
);
// Play audio
my_media.play();
}
The other function we need to include a helper function that will assist in locating the audio file’s full file path.
function getPhoneGapPath() {
var path = window.location.pathname; path = path.substr( path, path.length - 10 ); return 'file://' + path;
};
Save this file.
The final piece of the puzzle is to ensure that our config.xml has to include the Media plugin and the File plugin references, as well as enabling any device permissions that might be needed. I naturally used ConfiGAP to create my config.xml file. I opted to skip defining app icons and splashscreens.
The entire project is then uploaded to PhoneGap Build and a native app generated. Once installed on my devices, I have a bird animation flying, tweeting away.
This sample project is available from my GitHub repo.
UPDATE:
I posted an update on this here.
Prototype A 
Chris – this explains why I am having a problem getting my Hype HTML5 project to play (http://tumult.com/hype/) – I don’t know Edge Animate but believe Hype is similar. It’s a great prototyping tool which creates HTML5 files with audio that plays perfectly on IOS and Android, Mac and PC browsers.
But of course audio files are fairly large and it’s easy to overload mobile browsers or slow them down.
When I bring my Hype generated HTML5 project into Phone Gap build, it runs beautifully – but without audio.
Have you tried the process you outline above with Hype generated files ?
As someone with limited coding knowledge, I am desperate to find a solution.
The HTML5 test version is here – but takes a long time to load http://www.storytrail.co.uk
regards – – Alastair Nisbet
Have not worked with Hype, but suspect the same patch could be applied.
The problem is my app is an audio journey with around 14 audio files which users play, pause and stop during their journey. Can I play, pause and stop 14 files using your method do you think ?
Can’t see why not. The issue might be if you use PhoneGap Build and their app size limit. Locally building would not be a problem.
Hey Chris,
I have tried this with my current Edge project and it sort of works but there are some odd issues.
The first is that, despite having all identical code in all the places you say to put it, on all the pages I have, sound only works on the first page. When I move to the next page, no more sound.
Also, is there a way to add the code within Edge? The way you say to do it, means that anytime I update something on the page, I have to go and re-insert the code into the edgeactions.js file before I zip and update the code on PGB.
And lastly, is there a specific reason why this does not work on my iOS builds? (Is this an Android only code method or might it be something in my config.xml?)
Thanks,
Justin