HTML5 audio on iPad and Chrome

Feb 11, 2013

Hi everyone,

I've been banging my head for a few days now and tried so many combinations of things that I'm sure I'm now chasing my own tail.  I'm REALLY hoping someone out there is able to provide an example file (or preferably  tweak my own) that works as I'd hoped.

Attached, I have a test file that I have made to try out various methods of getting consistent HTML5 audio on iPad and Chrome.  Within the file I have placed some comments to explain what I'm trying to do on each Slide attempt and what I see seem to experience.

My GOALS

  • To get audio to work consistently on iPad and Google Chrome in HTML5 ONLY - am unable to use flash even on Chrome
  • Need to be able to navigate with Next/Prev and have audio on each slide Reset to initial state and play from beginning in both iPad and Chrome

WHAT I GET :

  • Mostly will work in Chrome although Slide 3 in this example doesn't seem to play audio in Chrome the FIRST time the slide is loaded. Successive loads then seem ok. This is over http. Testing locally it seems fine.
  • Cannot get the iPad (1st generation iOS5 is our test spec) to "Reset to initial state". When navigating with NEXT from a page with audio that's part-way through and clicking PREV to return, the audio is always resumed from where it left off rather than resetting.
  • Have tried MANY variations on the attached file (adjusted all the checkboxes in the Cog layer where applicable) with varying issues.
  • ALSO, I have tried having NO audio on a slide until a user clicks a specific button : eg "Play Audio" which then does a "Show Layer" which contains the audio. However the same type of issue occurs - if the user then clicks Next then Prev during this audio playback, the audio on the iPad does not restart from initial state.

SPECS

  • Have installed Update 2 for Storyline on Windows 7, latest version of Chrome
  • All slides are set to Advance "By User"

Any help, tips or tricks would be most appreciated!

Cheers

Paul

20 Replies
michele oksa

In reference to "Mostly will work in Chrome although Slide 3 in this example doesn't seem to play audio in Chrome the FIRST time the slide is loaded. Successive loads then seem ok. This is over http. Testing locally it seems fine."

If local test works, it sounds like it is a server lag, especially if it's only the first time it loads.  By the second time the file has been loaded and it is there to play.

Paul Douglas

Yeh I'm starting to agree with you Tim. I see your other thread over here regarding similar issues : http://community.articulate.com/forums/p/14200/138070.aspx which doesn't seem to have had any confirmation or feedback from Staff?  Be great to hear if they can at least confirm the issues.....I might add a little comment over there just to double the chances of someone seeing these issues....

Thanks Michele - yes that's a possibility but that in itself is quite worrying in that it implies there's no "smarts" in the HTML5 version to ensure assets like audio are loaded and ready to play making synchronising of audio and animation very much hit and miss in a real world server environment. It seems they've got it working ok on the Flash version but HTML5 just doesn't seem to be ready.

I'll be sure to post back any findings or feedback I receive from Articulate.

Cheers

Peter Anderson

Thanks again for your file, Paul. After publishing your test project, I'm able to replicate the same behavior you've described, most notably on Slide 3. Based on that, I'm going to open a ticket with our support engineers on your behalf so they can do more thorough testing. Once they've had a chance to review your file and run tests, you'll be hearing from someone shortly thereafter. 

Thanks again for allowing us to work with you on this

Paul Douglas

Hi Peter,

I've discussed the issue with support staff but it seems the iPad issue is likely an iPad1 (not upgradable to iOS6) issue. So iPad1 audio is not really feasible as yet.

However I am still having major problems with Chrome HTML5 audio. Apart from the Chrome issue on Slide 3 in my test file above, Chrome also struggles when layers are used similar to this thread (http://community.articulate.com/forums/p/24905/141394.aspx)  and am wondering if there's any word on a real fix for this?  Randall discusses basically NOT using layers at all as a fix but I'd really hope that a fix comes along that allows for the use of layers as using new slides for every step of a course makes maintenance cumbersome.

Cheers

Christine Hendrickson

Hi Lauren,

Have you had a chance to install Update 3, yet?

To find your current version of Storyline, click on "Help" and "About Articulate Storyline".

If you're not running version 3 (1305.2012), please download and install the update using the link below:

Articulate - Storyline Update 3

Once you've finished installing the update, please republish and test your course on the iPad. If the problem continues after installing the update, or if you already have Update 3 installed, please let me know.

Thanks very much!

Christine

Paul Douglas

Hi Lauren and Christine,

I was relieved when I saw that Update 3 was available and claiming to address many of the audio issues in HTML5.

Sadly though I'm still having big issues.  Lauren, I'm not sure if you were having the "Reset to Initial State" issue on iPad2 WITH the new Update 3, but for me so far my iPad1 tests have not gone well. I've attached an example .story made new with Update 3 and not just an old Update 2 course republished (in case that would bring with it other issues).  The example walks through my issues so far but in a nutshell :

  1. iPad1 audio sometime does not play at all on first run.  Still seems that the "server lag" idea mentioned earlier in this thread is a problem. ie. no preloading checks seem to be done and successful audio/synchronisation is at the mercy of server and internet connection speeds. The longer the audio the more apparent.
  2. "Reset to initial state" on a slide with timeline audio. If I navigate away from an audio page partway through audio playback and then return it does NOT reset audio or animation but continues from where it left off. This is exactly the same issue as I listed at the start of this thread with Update 2.
  3. "Reset to initial state" on a slide with timeline audio. If I wait until the audio and animation finishes completely, navigate away and then return back to the audio page, more than 50% of the time, the slide will be stuck at the end state - i.e. no audio or animation plays - we're just left with the slide as it was after all animation had completed.

Perhaps if the audio was triggered in a different way it might work (eg layers and button triggers etc) but I feel as though I'm back to square one with the iPad and audio and our clients have been holding out for Update 3 with the assumption this mess would go away without much R+D required....

Chrome HTML5 audio does seem to be improved with my limited testing but if anyone has any further updates on their experiences with Update 3 and iPad1/iPad2 and  audio then I'd love to hear how it's gone!

John U

This is a critical problem for us also.  We have a client with over 200 field workers on iPads of which two-thirds are first generation.  Per the client, the Articulate app is not an option.  We have installed and re-published under Update 3...no dice.  Triggers to stop and/or start media has not worked nor have other techniques. 

Is there anyone who has succesfully found a workaround or is there a fix coming in the very near future???

renee barnes

Our fix has been to scale down the multimedia and interactions:

- NO more layers with video. Video are on a screen per video, and the navigation is linear (not automatic but triggered by a user click)

- No layers with audio and text. We limit a lesson to 3 layers (with audio and text).  Audio/text is triggered with a button.

We think the issue is related to mobile browser limitations and the cache.  We have not had many problems (just occasionally) with audio playing when revisiting a slide.

John U

Thanks for the feedback, Renee.

Unfortunately the problem courses have no layers other than the base layer, all navigation is linear, no video (only audio), minimal animation, objects are quite small, no audio file is larger than 350KB, and all audio files are triggered.  The only possible wrinkle is that every slide has a single audio file that runs the duration of the slides's timeline (but none longer than 45 seconds).

Cache limitations on the Safari mobile browser may well be the issue, but it seems to me that if it is the problem, Articulate technical support would have identified, documented and published these limitations ages ago rather than allowing users to waste time trying to make it work.

John

Brian Batt

John U said:

This is a critical problem for us also.  We have a client with over 200 field workers on iPads of which two-thirds are first generation.  Per the client, the Articulate app is not an option.  We have installed and re-published under Update 3...no dice.  Triggers to stop and/or start media has not worked nor have other techniques. 

Is there anyone who has succesfully found a workaround or is there a fix coming in the very near future???


Hi John,

Just wanted to give you a quick heads up.  The first generation iPad is still running iOS 5.  Unfortunately, many of the audio-related API's for HTML5 that allow for rich audio playback didn't get added until iOS 6.  Thus, the audio output is much better on an iPad 2 that has iOS 6+ installed compared to a first generation iPad.

If you have a course with some basic audio that isn't working as expected (whether on an iPad 1 or otherwise), please submit a support case to us and we'll take a look:

http://www.articulate.com/support/contact/submit.php

Jason Johnson

Brian Batt said:

John U said:

This is a critical problem for us also.  We have a client with over 200 field workers on iPads of which two-thirds are first generation.  Per the client, the Articulate app is not an option.  We have installed and re-published under Update 3...no dice.  Triggers to stop and/or start media has not worked nor have other techniques. 

Is there anyone who has succesfully found a workaround or is there a fix coming in the very near future???


Hi John,

Just wanted to give you a quick heads up.  The first generation iPad is still running iOS 5.  Unfortunately, many of the audio-related API's for HTML5 that allow for rich audio playback didn't get added until iOS 6.  Thus, the audio output is much better on an iPad 2 that has iOS 6+ installed compared to a first generation iPad.

If you have a course with some basic audio that isn't working as expected (whether on an iPad 1 or otherwise), please submit a support case to us and we'll take a look:

http://www.articulate.com/support/contact/submit.php


Brian, thanks for the update on this. So iOS5 was a big source of the issue but I'm even having some issues with iOS6. The issues seem to be similar to prior posts where the animations don't synch with the audio and when closing/re-opening a layer with audio, the animations are stuck in their final state or, even weirder, seem to go totally at random. Are there any official recommendations for combining animations, audio, and layers? I also notice that a layer should only have 1 audio file; not multiple strung together because the successive files won't play.

Leslie McKerchie

Hi Gillian! I see where you had an open case on this issue (00337282) and our support team was not able to reproduce. A published file link was sent to you to test, but no response was received.

The subsequent case (00337577), filed by a colleague, is still in testing. Again, it appears they cannot reproduce and the issue only seems to occur as it relates to your LMS. You should be hearing from someone on this soon.

If a bug has been or is detected, it will then be in the hands of our QA Team.

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