Slide Layer Audio/Timeline sync problems in HTML5

Feb 04, 2013

I have a slide that contains 4 slide layers. All layers including the main timeline contain an audio track that is synced to the animation (fade in/out) of various graphics. Clicking buttons on the main slide triggers each of the others. It plays correctly in the web/flash version, however when viewing the HTML5 version on my iPad the slide layer animations do not begin playing until the ENTIRE audio track for that layer plays through. How can I get the animations on the slide layers to play in sync with the audio as intended?

15 Replies
Christine Hendrickson

Hi Randall,

First, if you haven't already, make sure you have Private Browsing disabled in Safari. You mentioned this is working in the Flash version, I assume this means you've tried the course in the Mobile Player, then, correct? 

What triggers are you using for the buttons that show the layers? Are there any additional triggers for the audio or animations? 

Are you able to share the project file here, or send it to us privately?

Thanks!

Randall Sauchuck

I can’t use the Mobile Player for this project. It has to be playable inMobile Safari. The buttons that show the layers also set variables to true andsome other objects states to normal. Basically each link gets a “checkmark” anda Boolean flag so that when the user has viewed all content the next button ismade active. In addition when all the sub layer animation buttons are clicked atext box is displayed indicating the user may now click Next to proceed. Thereare no additional triggers within the animations except when ending theanimation to set a flag that it has been completed.

Randall Sauchuck

Hi Christine,

Cleo sent me the following response

After running some test, I was able to isolate the cause of the issue. What is causing the animation not to sync with the audio is because it's grouped. To resolve the issue, you need to ungroup Shape1 (see attached 00317402-UngroupShape1.jpg for your reference) and republish your file. 

Unfortunately when I ungrouped the items and republished the issue still remained, The audio on the slide layer plays thru and then the animation plays afterward.

Randall Sauchuck

Hi Mark,

I ended up removing the slide layers from the page entirely. Instead I created a new scene and made a separate page for the content on each of the slide layers. Then back on the original "launch" page I changed the triggers from "show layer" to "jump to slide". I also had to create another version of the "launch" page that represented its "finished" state. When a user "closes" one of the fake slide layers they are sent to this duplicate version (otherwise they would have to sit through the original slide's entire animation again) Having the content on separate slides has an additional benefit because it allows me to use the "Notes" sidebar as a "Transcript" which you cannot do for a slide layer. Also it makes replaying and "scrubbing" the audio easier to deal with as well.

I had to do quite a bit of futzing with triggers and variables too because when a user clicks an icon on the launch pages I have it set to a visited state (adds a check mark)

NB. I have run into audio issues having more than one audio file in a slide in HTML5. Now I combine them all into one file before I import it.

Hope this helps

Paul Douglas

Hey everyone,

Originally most of my attempts at audio in HTML5 seemed problematic on the iPad1 iOS5 (apparently it MAY work on iOS6 but we have been unable to test that as yet).  However I have since been making layers with audio now with the aim of at least getting the HTML5 version to work in Chrome (no use of flash is allowed in this project). When running the course locally on Chrome it seems fine but over HTTP it behaves as you mention and the audio finished playing BEFORE the animation played through....so thanks for the tips - looks like I may have to rebuild the course in a way you mention.

HTML5 audio seems like a pretty major issue. (Another thread where I've discussed audio : http://community.articulate.com/forums/p/25346/139555.aspx#139555)

Hopefully these issues will be sorted out in the next release but until then it seems we need to compile a list of workarounds and ways to structure storyline to perform better in HTML5.

Cheers

Jason Johnson

I've been testing my course on an LMS and for iOS6 the audio plays from the beginning each time on my layers but I still notice the animation synching issue. If you can "design" around that, you may still be able to use slide layers with audio BUT it's definitely a concern. I can't go down that road with much confidence, unfortunately. This definitely needs to be fixed. I could live with it being a fraction of a second off but this is ridiculous.

This discussion is closed. You can start a new discussion or contact Articulate Support.