Audio is not pausing while swapping the Browser Tabs

If user moves to another tab on his browser while the course is running the content will stop moving while the narrator will keep speaking which leads to difference between the displayed content and the narrator voice

 

Sample Link - Please check the second screen.

http://54.187.125.87/sujit/Test/sample/story_html5.html

32 Replies
Ali Goulet

Hey Christian,

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 you reported where audio continued to play in the HTLM5 output when switching to another browser tab.

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!

Hey there Sinchu,

We're still working on rolling out a fix for Storyline 3 as well, and we'll keep you posted as soon as it's available! 

Adam Beasley

Was there ever a fix for this? Our company decided to go with Storyline 3 due to budget reasons and having the audio continue while moving to other tabs/browsers is causing clients to look at other developers. This is a serious issue for us and the fact that it is fixed in 360 and not in Storyline 3 is disappointing. I would also like to be notified when this is fixed.

Mateusz Szuter

Hey Ali,

what do you mean by 'fixed'? That audio will also stop when switching to a different tab or the whole content will play along when switching to a different tab? Or maybe the behaviour can be controlled?

edit:

Ok, I checked the storyline360 output. The content is still paused when switching to a different tab. Well, my game is useless in html5. We should be able to decide the behaviour of such events...

 

Ashley Terwilliger

Hi Mateusz, 

It sounds like you were looking for the issue to still be present as it worked for your game? I'm sorry to hear that it's caused you some unexpected trouble. 😕 

Perhaps you could share a copy of your game, and the community can weigh in with other ideas and solutions to help you accomplish the set up you need! 

Mateusz Szuter

Hello Ashley and Leslie, thanks for reply.

I won't share the game itself but I can share the mechanism:

http://www.inquest.pl/scorm/timer_html5/
http://www.inquest.pl/scorm/timer_flash/

W
hen you run html5 version and switch tabs, the timer will stop. Flash version works ok.

And I think you can pretty agree with me, that's not wanted behaviour, in any case. If the problem with sound not stopping along with slide have been resolved in Articulate360 - something went wrong. Audio AND slide shouldn't stop at all when tab is switched!

IF someone wants availability to allow users STOP/PAUSE the course, he/she can enable a seekbar with pause button. In any other case, it's a problem for course developer, because without editing the storyline app.min.js you cannot solve that problem (it has something to do with onblur and onfocus javascript functions - but I myself can't fix it). And when also we have something like baselayer is paused when switching tab, but audio or video goes freely... well, that's not ok. 

ANY course based on time will crash with this behaviour. No simple time-limited questions, not mentioning any advanced synchronization. 

"You are welcome to share your ideas with our team here if you'd like."

Thanks Leslie for the contact, but unfortunately, I've been sharing my ideas with the team since 2012 and never heard back from them, nor even wishing to my ideas come true, so I will just pass on this idea ;)

I hope you or Ashley, as staff members, can point to them that issue as a serious issue, because the storyline output is just... faulty. And to make things clear - if they could make scripts pause audio alongside with timeline, that it's simple to not pause anything at all. They know where to search and probably they exactly now what to edit. 

 

Ashley Terwilliger

Hi Mateusz,

Thanks for sharing those examples. As far as feature requests go, we've recently revamped our process to help our product team prioritize, and you can read about that here. We don't typically respond to the Feature request emails, unless our team needs clarification - as you can imagine, we see a lot of emails and a lot of different ideas! But they are read by our team and organized so that we can accurately track them! 

I'll pass this discussion along to our team and let them take a look at the examples you shared. 

Mateusz Szuter

Thank you Ashley!

It's not like I'm expecting to immediately post an upgrade to Storyline (3 in my case). But if they can share a workaround like editing some output files, that would be really, really great and could save me some inconvinient talk with client :) I've seen that this problem Was reported earlier (12 months ago) and even Leslie commented on it. :)

Ashley Terwilliger

Hi Mateusz,

Yes, we had the issue where the audio kept playing and the animations stopped if you went to another tab. It looks like the fix, stopped the audio and animations in HTML5, whereas in Flash it showed the audio stopped and the animations continued.  It's not what I'd expect either (as Flash and HTML5 should match) so I'm going to file a new issue with my team to take a look. 

I honestly could talk myself in circles for what *should* happen - but I agree that the audio/animations should be in sync...either stopped or continuous while on another tab/window and it should be the same for HTML5/Flash. 

I'd love to have your .story file as well to include in that report, if you can share. If you need to share privately you can also upload it to me here.

Mateusz Szuter

"I honestly could talk myself in circles for what *should* happen"

Ashley, I'm sorry, but not at all :) When you open youtube video and switch tab - does it stop? When you open mobile game or multiplayer and you switch tab/window - does it stop? When you run podcast on some site and you switch tab - does it stop? 

Story file is basics of all, but here it goes

Have a nice day

Ashley Terwilliger

That's the beauty of Storyline - you could use it for so many things. When I saw your timer I assume you want to move the user forward throughout the course, and if they're not paying attention on a slide because they've opened a new tab I'd say keep the time and music going! 

On the flip side of that, as you shared a Youtube video would stop (not just the audio, but a whole video) and that's expected. So a few different use cases here. 

Either way, I agree that HTML5 and Flash should match, and that the audio and slide elements should be in sync. So if one stops, they both stop. That's why I wanted to get all the information possible into the hands of my team - they're the best equipped to figure out next steps.

Thanks for sharing the file. 

Ashley Terwilliger

Hi all,

Thanks for your patience while we took a look at this! Our team implemented an additional fix in the latest update to help with the continued issue where an animation continues to play in HTML5 when navigating away from the browser tab. 

Just launch the Articulate 360 desktop app on your computer and click the Update button for each application (in this case Storyline). Details 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.

Mateusz Szuter

Well, at least it's consistent.

Now I just need to find a code responsible for stopping playback when switching tabs, and make it NOT stopping it, so I can have time-limited questions! ;)

PS Leslie or Ashley, you are doing a great work here and there on the forums, answering like every question asked and trying to help, like rest of the staff, but have you ever considered to delegate someone from developers to aid some of us who have more complicated issues? Now the html5 course output is basically some html, some css, and plenty of js. And all of these files can be edited after publishing course, so it's way more flexible than it used to be with flash output. However, based on my observation on forums, you (I mean, the whole staff :)) sometimes answer with "We are sorry, it's not possible, please submit feature request" and then some user pops in and says "edit the file X and Y like this and it would work", and it works. Having someone from devs here to answer those more custom questions would be a huge addition to community. But that's merely just a humble suggestion from user, who constantly wants his courses better and better. I always try to share with other users some hacks I've found myself, but there's still plenty to discover.

Have a nice day!

Matthew Bibby

Hi Mateusz,

Please keep in mind that modifying the published output is not supported by Articulate. So while we are free to hack around at the code to make it do stuff it wasn't designed to do... Articulate aren't able to support us in those cases.

Regarding the behaviour of video and audio pausing when switching tabs, I believe this is something that is typically controlled by the browser. And some browsers provide users with an option where they can choose if they would like background tabs to be paused or not, so I don't think that is going to be something you can fix by altering the Storyline output.

In order to minimise the negative effect that having many tabs open at once can have on browser performance, numerous things happen behind the scenes that many people aren't aware of.

For example, if we consider timers for a second, while you may want these to run happily in the background while the tab isn't being viewed... Google disagrees. This is because running timers in the background has a performance cost.

Since Chrome 11 (March 2011) this has been their policy:

Each independent timer is run no more than once per second. Chrome runs these timers in batches once a second, ensuring that the number of process wakeups is kept to a minimum. Pages playing audible audio are considered user-visible and exempted from background timer throttling. Exemption lasts for several seconds after audio stops playing to allow applications to queue the next audio track. Note that audio is considered audible when and only when Chrome shows the audio icon. Silent audio streams do not grant exemptions.

And since Chrome 57 (March 2017):

Budget-based timer throttling is a further extension of the timer alignment mechanism, placing an additional limit on background timer CPU usage. It operates as follows:

Each background tab has a time budget (in seconds) for running timers in the background.
A page is subjected to time budget limitations after 10 seconds in the background.
A timer task is allowed to run only when the time budget is non-negative.
After a timer has executed, its run time is subtracted from the budget.
The budget continuously regenerates with time (currently set to a rate of 0.01 seconds per second). Note that this budget regeneration rate can be tweaked as Chrome collects more data about throttling behavior.
There are a number of automatic exemptions from this throttling:

Applications playing audio are considered foreground and aren’t throttled. 
Applications with real-time connections (WebSockets and WebRTC), to avoid closing these connections by timeout. The run-timers-once-a-second rule is still applied in these cases.
Note that this his mechanism uses wall time, not CPU time. It’s a good approximation of CPU time and penalises blocking the main thread for a long time.

Finally, remember that if you are using long tasks in the background, your application can be throttled for a very long period of time (up to 100 times the duration of your task). Split your work in to chunks of 50ms or less per the performance guidelines and use the visibilityChange listener to avoid doing unnecessary work in background.

These things change all of the time. For example, next month Google is changing their autoplay policy. For details on how this will work, see here.

And this is just one browser. Safari, Firefox, Opera, IE, Edge etc. all handle these things differently and are also evolving all of the time (sometimes in really silly ways... yes, looking at you IE and Edge).

The developers at Articulate do a great job of keeping on top of these kind of changes. I personally would prefer that they focus on this stuff rather than spending their time in the forums. Because as you've acknowledged, Leslie, Ashley and the rest of the team do a brilliant job here on the forums. They are always engaging with users and are the first to help where they can. And Articulate are definitely listening. As shown in this thread (and many others) when a bug is identified, it goes through the proper channels, get prioritised and fixed. Then, the team jump back to all of these threads to update individuals that the issue that was impacting their work has been resolved. That's better service than you find with most companies.

I get why you are frustrated.

I know that there have been many times that I'd do anything to get Articulate's developers to help me figure out where I have gone wrong when modifying the published output. But at the end of the day, they should be focusing on their core development work and keeping Storyline as good as it can be for everyone. 

Anyway, that's enough from me...

Mateusz Szuter

Hi Matthew again today :)

As for the modyfing output - yes, of course I know there is no support for this. And I didn't except anyone to give us full support for this changes. My suggestion was more like "hey, can you check, if someone can sometimes pop to give general tip, where you can search to achieve desired effect" :) Like you replied to my post about background audio playing - someone from staff could write "hey, that's not officialy supported, but you can try to edit story.html and paste there some audio tag and experiment". Also, concering this particular topic - some dev could pop and write "hey, try to look in file .js for function(stopcourse), maybe you'll be succesful" :)

"Regarding the behaviour of video and audio pausing when switching tabs, I believe this is something that is typically controlled by the browser." Probably yes, but... before update we had a problem that audio was playing when tab had been switched. After update, audio is not playing. So, in this case, what controls behaviour? :)

Also, all that stuff about timers, I don't think it applies to storyline output content at all. Browser doesn't stop javascript timers, you can check at this fiddle - http://jsfiddle.net/wr1ua0db/17/
so, it's purely dependant on site, not on browser (didn't check safari tho).

And once again - I highly appreciate the work staff is doing! I see in other threads that they are helping everyone :) I'm maybe a bit frustrated, because sometimes I came with something brilliant ;) in my mind for a new training and storyline is bottleneck :(

And concerning this topic particular again - well, to be honest, there is still some inconsistency. :) it will pause audio, video, it will pause the timeline. But as I'm writing this post, I made dummy quiz with results slide and option "end quiz after 5 minutes". And it sits in another tab of my chrome. And, well, audio has stopped, timeline has stopped, but quiz time moves on :)))))) So, at all, Storyline agrees with me - time should move on when you have quiz opened on another tab :)

Matthew Bibby
Mateusz Szuter

"Regarding the behaviour of video and audio pausing when switching tabs, I believe this is something that is typically controlled by the browser." Probably yes, but... before update we had a problem that audio was playing when tab had been switched. After update, audio is not playing. So, in this case, what controls behaviour? :)

I may be wrong about this being controlled by the browser, it's not something that I've researched in depth. So apologies if I've misadvised you. I do remember that there was a flag in Chrome (i.e. an experimental feature) that gave the end user control over this behaviour, but it has been removed at some point. 

Regarding timers, that information from the Google Chrome release notes makes it clear how that browser manages things. But keep in mind, all of that happens behind the scenes and when you switch back to the tab it quickly catches up.

You'll notice if you test the timer example I shared here in Chrome, that when you switch back to the tab there is often a really short delay before the 1s count down continues. The same happens with the fiddle you shared.

As I said earlier, I appreciate your frustration. I've felt the same ways many times before. If you are finding that Storyline is a bottleneck for the kind of work that you are doing, then perhaps it isn't the right tool for you? I love Storyline and use it daily, but for some projects, coding everything by hand makes more sense, as I have complete control of the every stage of development. 

Regarding this particular topic and how the timer runs in Storyline. I'm not sure that I completely understand the issue. I don't know if you are expecting Storyline to behave differently to how the developers programmed it to behave, or if there is a bug that is causing issues.

Can you please explain to me (as simply as possible to avoid potential confusion) how you think it should behave and how it actually does? I know you've covered this already, but when rereading this thread I somehow got myself more confused! But it is Friday here and it's been a very long week... so confusion on my part is to be expected.

Thank you for having this conversation with me Mateusz, I really appreciate it.

Susan Jones

Am wondering if there have been any updates on this - I want a user to be able to go to a different tab but still have their courses PLAY, NOT STOP when they leave the tab. This should be the choice of the designer when publishing the courses shouldn't it? All other content on my lMS continues to play if you move away from it, but the courses I create in storyline do not. People can't always be stuck in their browers, sometimes they need to continue to do work and just want to hear the audio while they are doing it. Please help!