Audio and HTML5 on iPad Frustration

OK, so I know that for audio to play in HTML5 on iPad it has to be triggered by the user.

I have a slide with a question on it. I have it setup so that when the user answers the question and selects the Submit button it then goes to a NEW SLIDE (either the "correct answer" slide or the "incorrect answer slide"). On both feedback slides there is text and audio. The problem is that the audio never plays in HTML5 on ipad. It always plays in the Flash version. It seems like the Submit button should work like the "Next" button does... triggering an advance to the next slide and the audio to play. This does not seem to be the case. Can anyone help?

All my other slides (which advance by using the "Next" button) play audio just fine. 

18 Replies
Bill Harnage

Ah, html5 and the ipad... the bane of my development the past few months

Is the feedback on separate layers in the slide?  You might try adding a trigger to start the layer playing once it's displayed if you haven't already, but it should do this automatically.

Since html5 only wants one audio or video track at a time, I wonder if this is causing the problem.  Maybe the browser is reading it as two audio tracks.  Would it be possible to provide the feedback in separate hidden slides as opposed to layers in a slide?

Jill Freeman

Hi, I have all slides set to advance By User, yet the audio doesn't play (on my computer w/Firefox or IE) on any slides using the story_html5.html file to launch it. I think this is normal when played on my PC through a web browser.

I am unable to test on my android tablet right now. Is there a place to simulate testing this as if it is on an iPad/iPhone?

Kevin Thorn

That pesky audio thingy in HTML5 is tricky to get your head wrapped around.

If you think at a high level that HTML5 does not support auto playing of audio files, then think through your design with that at the forefront.

Clicking a "Submit" button (or any button with any name) to advance to another slide is not necessarily the same thing. You're still advancing to a new slide with the expectations the audio will play. 

The idea here is Click a button > audio plays. Click another button > advance slide.

- or - 

Click a button to advance slide > click a button on that new slide that plays audio.

You have to be "on" the slide first, then present a new button to play audio.

It's not Storyline. It's just how HTML5 works...today. 

Jill Freeman

Thanks, Kevin. I'm not sure how to even do this, but it sounds like I need to place a button on each slide if there is audio on it, right? Such as Advance to next slide...Play slide...Advance to next slide...play slide.Geez, you are right that it is hard to get my head around it.

OK, so how about I have all slides set to Advance automatically, then when the user arrives, they click Play (a button) that will trigger the audio. Then Next to continue. Right?

Jill Freeman

Hi, Kevin. I very much appreciate your help! I seem to have it working, but what about animation? I don't want the slide animation to play until the user clicks to start the audio, but it does play automatically. So I created another layer that contained all slide animation & objects that played when the play/pause button was clicked, but the 3 triggers on one button didn't work for me. (Button triggers are: play media when clicked, pause media when clicked, show new layer when clicked.)

I can make 2 buttons (Play and Pause) and apply the 3 triggers I mentioned. Or, I may need a variable? Or have static slides with no animation. Am I missing something else? Thanks. -Jill

Kevin Thorn

Animations should work. But again, HTML5 doesn't auto play of video and audio so it may be the same for animations. Not sure enough to confirm, though.

Here's a link to a iPad mirroring app called "Reflection." For $14 it's pretty slick.

Reflection App

Also, if you're not familiar with this, it's an article in Articulate Support with a chart of what works/doesn't work for Flash, HTML5, and the mobile player.

Articulate Storyline Feature Support for Flash, HTML5, Mobile App Player

Jill Freeman

Hi, Heroes! I developed a method to make sure animated objects are synchronized with narration/audio in your HTML5 output.  MANY  thanks to Kevin Thorn for helping me understand this!

In essence: 

  1. Slide 1 can be set to Automatically Advance to Slide 2
  2. Add trigger to play audio on slide 2 when user clicks button, with an additional trigger to Show Layer 2. Place audio on main layer and all other slide elements on Layer 2. 
  3. Add trigger on Layer 2  to Jump to next slide when timeline ends (the audio file)

This only requires one click per slide (to play the audio). Please see the attached story file as an example of this method.

Another note about audio that I discovered the hard way (and maybe it is already posted on the community somewhere): FireFox will not play the audio from my HTML5 output, but Google Chrome will. During testing, I mistakenly thought my audio wasn't working at all, when it was just a Firefox issue.

I hope this is helpful. The community has done so much for me! -Jill

Ashley Terwilliger

Hi Steve,

This forum discussion is a bit older, but as you can see in the earlier comments and the other linked forum discussion - the different browsers deal with Flash/HTML5 output a bit differently especially when it comes to auto play of the media elements. In Ravindra's case mentioned here, ultimately the "trigger that plays the audio file when the timeline starts" was what solved the issue on his end for use and playback on the iPad devices.

If you'd like our team to take a look and test your files, we'd be happy too - can you share a copy of the .story file with us using this form?