Cant volume up in HTML5 presentation on Chrome

Thanks Matthew, I will try it.

Problem still exists.

Check attached video.

Hi Kamil,

Are you using specifically the HTML5 output in Chrome? Our team is aware of an issue where you're unable to drag the volume slider in the HTML5 output only. Currently the workaround is to check that the player size should be "Lock player at optimal size" if the users need to view the HTML5 output in Chrome. It works as expected in Flash. 

I'll include this thread in the report filed with our team but I don't have any other updates to share at this time, so please feel free to utilize the workaround going forward. 

I am experiencing this same problem in Chrome viewing HTML5 output. I see this thread is a year old. Has this problem been solved yet? 

Hi Victoria, 

Yes, this is still something our QA team was investigating as it was specific to the HTML5 output in Chrome and when the player was set to "Scale to fill the browser window" vs. "locking the player at the optimal size. 

Hi,

It is still an issue, as we found out today.  I can't republish as it's gone out to 1000 people.

Is there still no fix?

Hi Jon, 

It's still an open issue for Storyline 2 specific to the HTML5 output in Chrome as mentioned above. 

If you republished the course, could you overwrite what you have uploaded to your existing web server or  Learning Management System (LMS)? You'd want to instruct users to clear the cache/history associated with that link to make sure they're seeing the latest version of your course. 

I’ll let you know as soon as we have an update on this issue.  I’m sorry if it’s slowing you down.

Hi fellow Articulate users,

sometimes when you want to solve something, you must open up the hood and get dirty... So that's what I did to help solve this problem.

I think I found a solution to the Google Chrome bug with the sound dial not working correctly (from what I tested, it seems corrected).

First of all, I had to dig into the file “/mobile/player_compiled.js”. This file is minified, so to understand the code more easily, I un-minified it.

The problem I identified is in the function “VolumeSlider.prototype.bindDragEvents”. More specifically in the click detection of the volume bar math code to convert the spot clicked into a % of volume to adjust.

Here is the original function:

 VolumeSlider.prototype.bindDragEvents = function() {
 var a = this;
 a.dragging = !1;
 var b = function(b) {
 a.dragging = !0;
 c(b);
 return !1
 },
 c = function(b) {
 if (a.dragging) {
 var c = a.ref.offset().top,
 d = a.ref.height();
 swipe.parseEventCoords(b);
 b = 1 - (swipe.rawY - c) / d;
 0 > b && (b = 0);
 1 < b && (b = 1);
 a.volume = parseInt(100 * b);
 a.update();
 if (a.onDragUpdate) a.onDragUpdate(b);
 $.each(VolumeSlider.sliderList, function(b, c) {
 if (c != a) c.volume = a.volume, c.update()
 });
 return !1
 }
 },
 d = function(b) {
 c(b);
 b = a.dragging;
 a.dragging = !1;
 if (b) return a.hide(), !1
 };
 player.isMobile ?
 ($(this.ref).bind("touchstart", b), $(window).bind("touchmove", c), $(this.ref).bind("touchmove", c), $(this.ref).bind("touchend", d), $(document.body).bind("touchend", d), $(window).bind("touchend", d), this.button.bind("touchend", function(b) {
 a.toggle();
 MouseEvents.processHideables(b);
 return !1
 })) : ($(this.ref).bind("mousedown touchstart", b), $(window).bind("mousemove touchmove", c), $(this.ref).bind("mouseup touchend", d), $(document.body).bind("mouseup touchend", d), $(window).bind("mouseup touchend", d), this.button.bind("click",
 function(b) {
 a.toggle();
 MouseEvents.processHideables(b);
 return !1
 }));
 MouseEvents.addHideable(".volume-slider", ".volume-slider,.icon.volume", function() {
 a.hide()
 })
};
 The problematic line of code is this one: “b = 1 - (swipe.rawY - c) / d;”. This line is seeking where the user clicked on the volume bar vs the height of the bar (b = 1 (%where user clicked% - %top portion of the volume bar%) / %height of volume bar%). So, if you click on middle of bar, it gives “b = 1 – 0.5 = 0.5 = 50% of the volume.

Here is the catch with Google Chrome (compared to other browsers), the value reported by “swipe.rawY” is incorrect, to get the good value, we must use “swipe.y”.

Since you cannot just change the code with “swipe.y” since it will break the code for the other browser else than Chrome, we need to detect if Chrome browser and apply the fix on that case. How ? Simple, just detect Chrome with this line “var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;”. Now the variable “is_chrome” will be TRUE if the current browser is Chrome.

We can now just do this:

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome)
{
 b = 1 - ((swipe.y - c) / d);
}
else
{
 b = 1 - (swipe.rawY - c) / d;
}

The final code should look like this:

VolumeSlider.prototype.bindDragEvents = function() {
 var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
 var a = this;
 a.dragging = !1;
 var b = function(b) {
 a.dragging = !0;
 c(b);
 return !1
 },
 c = function(b) {
 if (a.dragging) {
 var c = a.ref.offset().top,
 d = a.ref.height();
 swipe.parseEventCoords(b);
 if(is_chrome)
 {
 b = 1 - ((swipe.y - c) / d);
 }
 else
 {
 b = 1 - (swipe.rawY - c) / d;
 }
 0 > b && (b = 0);
 1 < b && (b = 1);
 a.volume = parseInt(100 * b);
 a.update();
 if (a.onDragUpdate) a.onDragUpdate(b);
 $.each(VolumeSlider.sliderList, function(b, c) {
 if (c != a) c.volume = a.volume, c.update()
 });
 return !1
 }
 },
 d = function(b) {
 c(b);
 b = a.dragging;
 a.dragging = !1;
 if (b) return a.hide(), !1
 };
 player.isMobile ?
 ($(this.ref).bind("touchstart", b), $(window).bind("touchmove", c), $(this.ref).bind("touchmove", c), $(this.ref).bind("touchend", d), $(document.body).bind("touchend", d), $(window).bind("touchend", d), this.button.bind("touchend", function(b) {
 a.toggle();
 MouseEvents.processHideables(b);
 return !1
 })) : ($(this.ref).bind("mousedown touchstart", b), $(window).bind("mousemove touchmove", c), $(this.ref).bind("mouseup touchend", d), $(document.body).bind("mouseup touchend", d), $(window).bind("mouseup touchend", d), this.button.bind("click",
 function(b) {
 a.toggle();
 MouseEvents.processHideables(b);
 return !1
 }));
 MouseEvents.addHideable(".volume-slider", ".volume-slider,.icon.volume", function() {
 a.hide()
 })
};

I attached a version of the modified minified file with this message. Please note that the version of the original file is "var buildNumber=62;var buildDate="20160926 20:10";" running on STORYLINE 2.

Normally, we should wait for Articulate to prepare an official fix with this patch (if the code is tested and proved to solve the problem). If you absolutely need a fix now, you can just overwrite the original file in your project with my file (need to be done each time you republish). WARNING :  I quickly tested this fix and it’s not an official patch, so use it at your own risk !

I’m just a bit surprised that the Articulate team never solved this problem been reported 2 years+ ago and took me around 2h to find the problem and apply a fix without any knowledge of the structure of the code… Hope the programmers will test my fix quickly and include the fix in the next Storyline 2 patch release.

Thanks !

Patrick Perron