Does autostart audio work on mobile devices with v11.2a?

I've read several posts searching for an answer to the problem of autostart audio on mobile devices, but they were older than the newest version of Lectora, so I'm hoping that there is some new information that just isn't out there yet.


We've created a course to be delivered on computers, but we reformatted and recreated it to also be available for mobile devices. The issue we're having is with autostart for the audio (we have audio on every page). When I'm connected to the wi-fi and using that on my Android phone, the audio plays, but when I disable the wi-fi, and go to using the cellular network (3G on my phone), the audio will not autostart. It also does not autostart on the iPhone.


Must we have the user click every page to start audio? Or is there a setting/action that we can add to get the autostart to play on page load?

Discussion (23)

It does not work for certain on iPads. The iPad iOS requires a physical action to happen triggered by a tap.

This has little to do with Lectora. This is how mobile operating systems are designed: they purposefully (and for a good reason) disallow automatic audio file download and playback, especially when on 3G networks.

@krixquet 52317 wrote:

It does not work for certain on iPads. The iPad iOS requires a physical action to happen triggered by a tap.


I've noticed with iPads using Safari to run HTML5 courses, it is extremely slow and not worthwhile.... Our department uses Articulate Storyline in addition to Lectora 11. Hopefully its okay to mention the 'other' authoring tool...


In any case, Storyline can output to a format that uses its own "Articulate App" that can use autostart for multimedia elements especially video. The only catch is that the app needs Tin Can for completion status to the LMS. One thing to note is that Articulate somehow overcame the Flash barrier on iPads as the Articulate format for the app is actually Flash based but somehow uses a wrapper to get the content to play correctly on an iPad.


-kelly

Thanks for all this info. I turned off auto-start on my audio, and I have an onShow action on each page to start the audio. It doesn't work on my Galaxy SIII at all. I haven't tested it on an iPad yet. Does anyone know if there are any other work arounds? We can't have the learner touch a button on each page to get it going.

TIA

@dmstrs 60571 wrote:

Thanks for all this info. I turned off auto-start on my audio, and I have an onShow action on each page to start the audio. It doesn't work on my Galaxy SIII at all. I haven't tested it on an iPad yet. Does anyone know if there are any other work arounds? We can't have the learner touch a button on each page to get it going.

TIA

As stated above, learners must perform a physical action - touch the screen somewhere - for the sound to play. OnShow won't do that, you need an OnClick.

@kellykungfu 52331 wrote:

I've noticed with iPads using Safari to run HTML5 courses, it is extremely slow and not worthwhile.... Our department uses Articulate Storyline in addition to Lectora 11. Hopefully its okay to mention the 'other' authoring tool...


In any case, Storyline can output to a format that uses its own "Articulate App" that can use autostart for multimedia elements especially video. The only catch is that the app needs Tin Can for completion status to the LMS. One thing to note is that Articulate somehow overcame the Flash barrier on iPads as the Articulate format for the app is actually Flash based but somehow uses a wrapper to get the content to play correctly on an iPad.


-kelly

Articulate uses HTML5, no-Flash output to play on iPads. And learners still must click a huge "play audio" every time the course loads. However, since Storyline presents the whole course on one page (adding and removing slide objects as needed), learners only have to click it once. I don't know how the app works, though. Maybe it is just a Flash wrapper.

@ssneg 60576 wrote:

Articulate uses HTML5, no-Flash output to play on iPads. And learners still must click a huge "play audio" every time the course loads. However, since Storyline presents the whole course on one page (adding and removing slide objects as needed), learners only have to click it once. I don't know how the app works, though. Maybe it is just a Flash wrapper.


Hi Sergey,


Articulate Storyline actually has a bunch of SCORM outputs. It will automatically output to Flash, no matter what. The other options are HTML5 and/or to the AMP (Articulate Mobile Player). The HTML5 selection (to be used on iPads without AMP) is slow, but with their newest patchset, better. The AMP output is actually uses some sort of scaled down Flash but Flash for sure and is played somehow in their AMP player. The AMP player only works on iPads and not available at the moment for other tablets...


-kelly

Before I go and play around with this too much, has anybody tried using the HTML DOM document.createEvent() function to simulate the mouse click?


I'm no iPad wizard, so I was wondering if Safari is wise enough to notice a faked event?


Cheers,


David

I am also trying to fake out Safari to auto play my audio clips on every page. (In Lectora, Storyline or other software is not an option.) we have to modify about 20 courses so I hope to find a quick solution. Any one used iFrames? That is one suggestion I received.

thanks, Heidi

Here's a crazy idea. Put all your mp3s on Page 1.


Include an full-page iframe on Page 1 of your course, set source to page 2. Now if you have any navigation on Page 2, it all happens inside the iframe, while you are actually still on page 1. So your users think they're moving about the course, while in fact they never reload the page.


If you had a way of communicating between the iframe and Page 1, you'd be able to play any audio on Page 1 easily. Instead of "On Show Play Audio", you'd use "On Show Run JS (that plays the audio). In most cases, simple JS like "parent.audio44.play()" will work, in some cases extra scripting will be required. Of course, you'll also have to test carefully for SCORM, quizzing and other functionality.


I wish I had time to build a prototype.

Well, some months, iFrames work just fine, in other months it doesn't. It seems like everytime Apple updates, things stop working or start working. Frustrating.

@setarcos 63376 wrote:

We build courses for iOS and Android and also use a full-screen overlay button to start audio for these devices. The only issue we've run into is that the Firefox browser on Android does autoplay audio (and video) so it becomes confusing for the learner to be presented with a button to play audio when audio has already started playing on its own.


Do a very basic browser detection routine and hide the button if you detect a FF Mobile (or a desktop browser for that matter). Your learners will be happy :)

1. Create a custom variable called "DetectBrowser"


2. Add a title-level action "on show" - "run JavaScript":


var agent = navigator.userAgent.toLowerCase();

if(agent.indexOf('firefox') >= 0){

if(agent.indexOf("android") >= 0){

VarDetectBrowser.set("androidFF")

}

}[/CODE]

3. Add a title-level conditional action "on show" - "show audio button" - IF "DetectBrowser" does not equal "androidFF"[CODE]var agent = navigator.userAgent.toLowerCase();

if(agent.indexOf('firefox') >= 0){

if(agent.indexOf("android") >= 0){

VarDetectBrowser.set("androidFF")

}

}[/CODE]


3. Add a title-level conditional action "on show" - "show audio button" - IF "DetectBrowser" does not equal "androidFF"

Thanks for noticing that parenthesis. Fixed!

Thank you, Ssneg!


I also just received a response from Support that confirms this. Autoplay does not work on mobile devices.


So my next question is, can you circumvent this (necessary, I know) control? If you add an action to play on page show, will that be able to start the audio when the page loads? I'm going to test this, and I'll report back (unless someone else has already done this and found the answer).

@davidswaddle 62298 wrote:

Before I go and play around with this too much, has anybody tried using the HTML DOM document.createEvent() function to simulate the mouse click?


I'm no iPad wizard, so I was wondering if Safari is wise enough to notice a faked event?


Cheers,


David



This used to work before iOS 4.0. Now Safari is wise enough :)

@heidi 62327 wrote:

I am also trying to fake out Safari to auto play my audio clips on every page. (In Lectora, Storyline or other software is not an option.) we have to modify about 20 courses so I hope to find a quick solution. Any one used iFrames? That is one suggestion I received.

thanks, Heidi



I haven't tried it yet, but it was apparently patched for iOS 5.0. Also, to anybody testing who may have it working, if you're on ios 6.0, and have not updated, then that's why. iOS 6.0 was vulnerable to workarounds and was quickly patched in iOS 6.1. Most workarounds were shut down after iOS 5.0 apparently.


I would really love if someone came up with a solution for this, or if we were able to deploy rudimentary apps for iOS/android from Lectora. Nothing major, pretty much just a web app but in readily deployable format. That would be fantastic.

@ssneg 62361 wrote:

Here's a crazy idea. Put all your mp3s on Page 1.


Include an full-page iframe on Page 1 of your course, set source to page 2. Now if you have any navigation on Page 2, it all happens inside the iframe, while you are actually still on page 1. So your users think they're moving about the course, while in fact they never reload the page.


If you had a way of communicating between the iframe and Page 1, you'd be able to play any audio on Page 1 easily. Instead of "On Show Play Audio", you'd use "On Show Run JS (that plays the audio). In most cases, simple JS like "parent.audio44.play()" will work, in some cases extra scripting will be required. Of course, you'll also have to test carefully for SCORM, quizzing and other functionality.


I wish I had time to build a prototype.



Hmmm, looks interesting :)

I was not able to find a solution either. In the end, I put a large click box overlay on each of the pages, in order for the content to start, the student had to click on it. Once they did, the audio played, all of the text and graphic transitions started and the next button appeared. I added a brief note upfront advising students what to do. Although not super elegant it did work. We also had a standard web-based version of the course, so that was an option for the students.

@ssneg 63377 wrote:

Do a very basic browser detection routine and hide the button if you detect a FF Mobile (or a desktop browser for that matter). Your learners will be happy :)


Would the following code (from StackOverflow) be useful within Lectora to achieve detection? Can you give me an idea of the best way to implement this to hide a button?


function detectAndroidFirefox () {

var agent = navigator.userAgent.toLowerCase();

if(agent.indexOf('firefox') >= 0){

if(agent.indexOf("android") >= 0){

return true;

} else{

return false;

}

} else{

return false;

}

}[/CODE][CODE]

function detectAndroidFirefox () {

var agent = navigator.userAgent.toLowerCase();

if(agent.indexOf('firefox') >= 0){

if(agent.indexOf("android") >= 0){

return true;

} else{

return false;

}

} else{

return false;

}

}[/CODE]

We build courses for iOS and Android and also use a full-screen overlay button to start audio for these devices. The only issue we've run into is that the Firefox browser on Android does autoplay audio (and video) so it becomes confusing for the learner to be presented with a button to play audio when audio has already started playing on its own.

Sergey,

Your mobile Firefox detection works awesome. I just had to add a closing parenthesis to the bottom of the script :)

Your help is greatly appreciated!

- Rick

After reading the thread to the end I know how mobile Firefox detection works :) Thank you, guys, it's useful for my work.

Discussions have been disabled for this post