{"id":923,"date":"2017-10-11T11:41:24","date_gmt":"2017-10-11T10:41:24","guid":{"rendered":"https:\/\/greladesign.co\/blog\/?p=923"},"modified":"2018-01-07T16:45:23","modified_gmt":"2018-01-07T16:45:23","slug":"storyline-360-custom-volume-control","status":"publish","type":"post","link":"https:\/\/greladesign.co\/blog\/2017\/10\/11\/storyline-360-custom-volume-control\/","title":{"rendered":"Storyline 360 custom volume control"},"content":{"rendered":"

Today I was asked by my colleague at work to help her out with fixing problem with custom volume control. She was using StoryLine 2 solution from this page<\/a> but on Storyline 360. Following is the script from the SL2 solution:<\/p>\n

\r\nvar player = GetPlayer();\r\nvar volumeCount = player.GetVar('volumeCount')\r\nAudio.setMasterVolume(volumeCount);\r\n<\/pre>\n
<\/p>\n
This worked on the courses exported from StoryLine 2 as the Audio<\/code> object indeed has the setMasterVolume<\/code> which is not true for StoryLine 360 courses. I’ve searched internet and failed to find anything about volume controls on SL360.
\nMy colleague told me that SL has built in volume controls which work. I’ve enabled it and checked what has appeared in code (player-volume<\/code> and control-volume-slider<\/code>), then searched for it in output files. In the minified code I’ve found the currentVolume<\/code> function which was something I hoped to get access to.<\/p>\n
I’ve noticed that this method is wrapped with the define(\"helpers\/appState\"...<\/code> so I’ve tried to retrieve it with require<\/code> and succeeded<\/p>\n
\r\n\r\nvar appState = require("helpers\/appState");\r\nappState.currentVolume();\/\/get\r\nappState.currentVolume(0.5);\/\/set\r\n<\/pre>\n
With this finding in hand it was now simple to modify the original code to work in SL360:<\/p>\n
\r\nvar player = GetPlayer();\r\nvar volumeCount = player.GetVar("volumeCount");\r\nvar appState = require("helpers\/appState");\r\nappState.currentVolume(volumeCount);\r\n<\/pre>\n
The SL2 example was using volumeCount<\/code> property to make a division by 10<\/code> we can skip it and if we set up slider to be from start: 0 to end: 1 with step: 0.1 we can modify the script even further:<\/p>\n
\r\nvar player = GetPlayer();\r\nvar value = player.GetVar("volumeSlider");\r\nvar appState = require("helpers\/appState");\r\nappState.currentVolume(value);\r\n<\/pre>\n
Note: I have no prior knowledge of Storyline and I kind of hacked this solution, so if there is an “official” way to setup volume please let me know:)<\/p>\n
EDIT:<\/strong>
\nI think better option for changing the volume will be to use the onVolumeChanged(value)<\/code> callback method as it also updates the volumeToggle<\/code> state. <\/p>\n
If you want to have mute button functionality then use onToggleVolume()<\/code> method.<\/p>\n
\r\nvar player = GetPlayer();\r\nvar value = player.GetVar("volumeSlider");\r\nvar appState = require("helpers\/appState");\r\nappState.onVolumeChanged(value);\r\n<\/pre>\n
To toggle audio:<\/p>\n
\r\nvar appState = require("helpers\/appState");\r\n    appState.onToggleVolume();\/\/mute\/unmute\r\n<\/pre>\n
to test current state of the audio<\/p>\n
\r\nvar appState = require("helpers\/appState");\r\nif(appState.volumeToggle) {\r\n\/\/ audio muted\r\n} else {\r\n\/\/ audio unmuted\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Today I was asked by my colleague at work to help her out with fixing problem with custom volume control. She was using StoryLine 2 solution from this page but on Storyline 360. Following is the script from the SL2 … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":""},"categories":[141],"tags":[223,320],"_links":{"self":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/923"}],"collection":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/comments?post=923"}],"version-history":[{"count":10,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/923\/revisions"}],"predecessor-version":[{"id":964,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/923\/revisions\/964"}],"wp:attachment":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/media?parent=923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/categories?post=923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/tags?post=923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}