Seekbar stops progressing when I switch to another tab in HTML5 player for both Presenter and Storyline 360

I just noticed that if I have an HTML5 presentation or story running in one tab (Google Chrome, IE 11, or Firefox) and I switch to another browser tab, when I switch back, the seekbar starts from the same place it was at when I switched tabs, no longer matching the audio. Then when the audio runs out on the slide, the player waits for the seekbar to reach the end before it progresses to the next slide. 

This is in a presentation where the seekbar is locked down if that matters.

24 Replies
Will Findlay

Here is a video showing how the seekbar stops moving when I switch to a different tab, and how this causes dead space at the end of the slide because the seekbar still thinks there is still more audio: https://360.articulate.com/review/content/2a30dd80-bb3f-4a35-be93-3a39f8a856c4/review

This video is actually of a Storyline 360 player, but I first found the issue with a Presenter 360 player.

Will Findlay

It occurred to me that if you are using an LMS that launches a course by using a pop-up window (usually something that drives me crazy because pop-up blockers) this glitch is very unlikely to happen since the content window won't have any tabs to switch to, so that is good.

But for other scenarios I could see this being a real issue, e.g. users ,getting an email alert and switching over to another tab to preview it, then switching back, SMEs reviewing a course in Articulate Review and trying to multitask, etc..

Alyssa Gomez

Hi Will, thanks for reaching out and for including the screen recording of the issue - Peek is great for that sort of thing, isn't it?

The issue you described is a known issue for Storyline and Presenter 360, and our QA team is evaluating this behavior.  We’re monitoring the way this issue impacts our customers, so I appreciate that you shared your findings here as it gives us a better idea of the impact on our users. I’ll include your experience in their report.

Unfortunately I don't have any workarounds to offer at this time, but I'll be sure to add updated information to this thread as it is available!

Will Findlay

Thanks Alyssa. It looks like it is an HTML5 issue that has cropped up other places:

http://stackoverflow.com/questions/13726469/jquery-requestanimationframe-disable-pause-on-losing-browser-focus

From what I gather this browser behavior was meant as a feature to prevent unnecessary processing load when a browser page isn't displaying... but it sounds like it has thrown a few developers for a loop.

Will Findlay

Just curious if fixing this issue is on the roadmap.

It came up again when someone was reviewing one of my modules. They left 6 comments on 6 different slides that were all the same: "Please eliminate the extra deadspace at the end of audio." Except that when I look at the slides there isn't any deadspace, so my bet is that they were switching away from the Articulate Review page to something else.

Tess Richardson

Just wanted to put my hand up and say "me too." I discovered this issue while testing resource files and links in a published course. The seekbar stops while the resource loads in a new tab, though the audio keeps playing. If a user continues looking at the resource, then hears the audio stop and returns to the course browser tab, they have to wait for the seekbar to reach the end, as Will has described.

My guess is that many developers are unaware they are deploying courses with this inherent problem. While it does make for an amusing sort of punishment for users who think they can goof off while taking a required course,  ;)   I worry that the issue will lead to some unhappy clients and a need to update and re-upload many existing courses. 

Ali Goulet

Hey there everyone,

I have some great news! 

We just released another update for Articulate 360, and included a few important fixes and new features that you'll see in the release notes here 

This update fixes the issue in Storyline 360 where audio continued to play in the HTLM5 output when switching to another browser tab, which was causing some syncing issues.

Just launch the Articulate 360 desktop app on your computer and click the Update button for each application. Details here.

Please let us know if you have any questions, either here or by reaching out to our Support Engineers directly!

Robert Cummins

This might need to be a new thread, but the issue is somewhat related to stopping audio when the user focuses to a different browser tab.  Is there a way to stop audio playback in an interactive Storyline 360/Articulate Review block in Rise when the user scrolls the block out of view in the same block lesson?  Ideally the user would stop the playback if the play/pause button and or scroll bar exists.  But if there are no controls, and the user scrolls away from that block, say to two blocks below, the audio keeps playing.

Similar issue when embedding other multimedia like Youtube video in an interaction block.  For example, in a Block Tab, I add an embedded video.  If I view that tab and start the video, then click on a different tab, the video is hidden, but the audio plays on.

Ashley Terwilliger

Hi Robert, 

This sounds like it's only in your Rise courses, correct? If so, it'd be a bit different than the issues discussed here as they were for Presenter and Storyline 3.

We're happy to take a look at what you're seeing and help troubleshoot though! I didn't see that you started another discussion or sent in a support case (but let me know if I'm missing one of those). 

Can you tell me a bit more about your Rise course? Are you seeing this audio continuation while previewing, using the Share link, or uploaded to your LMS/web server? What browser(s) have you tested it in? Can you share the link to the course with us here?

Leslie McKerchie

Great news!  We just released Update 3 for Storyline 3. This includes quite a few important fixes and some new features as well. Check out all the details in the release notes here.  

The item you'll be interested in is:

Audio continued to play in HTML5 output when switching to another browser tab, causing animations to become unsynchronized.

Be sure to download and install the latest version of Storyline 3.

Let us know if you have any questions, either here or by reaching out to our Support Engineers directly.