I know there have been a few threads on this but I can't seem to find a solution!
I'm creating a project which I need audio for, but I would like the audio to run throughout the whole project and not just restart on each slide. I've tried adding the code that a girl called Emily mentioned a while back and putting the audio into the published folder (
Good grief – will there ever be an easier way to do this? I’m back to Emily Ruby’s original post, which seems to be a fairly easy way to do this, but I don’t get a story.html file (which didn’t work for some people) nor an index
It sounds like you are getting a bit overwhelmed by it all, so I have tried to put it in simple steps below.
1. In order to set up your audio file in the Resources tab do the following:
a. Click on the Player button on the ribbon bar at the top of the screen.
b. Click on Resources at the top of the Player Properties dialogue box and then the Add button (looks like a folder) at the bottom left.
c. Select the File option in the Add Resource dialogue box and browse to the location of your audio file and select it.
d. If necessary, edit the Title for the audio file and click Save.
e. Select the Features tab in the top left and then click the Resources check box:
This will place a Resources tab in the top bar of the Player when your SL project file runs.
A copy of your audio file will now be saved as part of your SL project and, when you publish it to the web, it will appear in the external_files folder, which, as I mentioned in my previous post, will be found inside the story_content folder.
2. To set up your javascript trigger (for the sake of this example, I am assuming your audio file is called "my audio file.mp3"):
a. amend your js as follows:
var audio = document.getElementById('bgSong'); audio.src="story_content/external_files/my audio file.mp3"; audio.load(); audio.play();
Your other js looks okay, so you should only need to change the code for the trigger that loads and plays the audio.
3. The final part is to publish your project to the web and then give it a try.
If you don't want to have a Resources tab on the screen when users are viewing your course, this will have to be done slightly differently. However, if you follow the instructions above, you will be able to prove that the audio is working as you want it to. The adjustments that then have to be made will be quite straightforward, so don't worry about it.
Thank you so much! I do know how to add a Resources element in the player. The only thing in your excellent and much appreciated guidance below is when you mentioned “publishing to the web”. I’ve been publishing to the LMS (we use the rise.com LMS) because that’s where my eLearning will be accessible to my users. Does not publishing to the web negate the process? Or do I have to do something different to make all of this work if I’m publishing to LMS?
Many thanks,
Dawn
Get Outlook for iOS
CONFIDENTIALITY NOTICE: This transmission (including any attachments) contains information which is confidential and/or subject to the attorney-client or work product privilege, and is intended solely for the recipient(s) identified above. Any interception, copying, distribution, disclosure or other use of this transmission or any information contained in it is strictly prohibited, and may be subject to criminal and civil penalties. If you have received this transmission in error, please immediately reply via e-mail, and then delete the transmission from all forms of storage and destroy all hard copies.
I wanted to update you on something. Whichever solution works by playing background audio no longer works with the latest Google Chrome browser! Which is my company’s default browser! My IT dept worked on this for me and they could get your solution to work in Firefox but not Chrome. Apparently Chrome now blocks background audio!
I wanted to update you on something. Whichever solution works by playing background audio no longer works with the latest Google Chrome browser! Which is my company’s default browser! My IT dept worked on this for me and they could get Owen’s/your solution to work in Firefox but not Chrome. Apparently Chrome now blocks background audio!
333 Twin Dolphin Drive, Suite 600
Redwood City, CA 94065
Office: 650.395.0236
[logo]
CONFIDENTIALITY NOTICE: This transmission (including any attachments) contains information which is confidential and/or subject to the attorney-client or work product privilege, and is intended solely for the recipient(s) identified above. Any interception, copying, distribution, disclosure or other use of this transmission or any information contained in it is strictly prohibited, and may be subject to criminal and civil penalties. If you have received this transmission in error, please immediately reply via e-mail, and then delete the transmission from all forms of storage and destroy all hard copies.
It actually still works on chrome. However, you have to have the user interact with the page 1st before executing the JavaScript to start the music. In the example below, the music starts playing when you click either of the puzzle pieces that you can move.
To be clear, I honestly can’t say which solution my IT could not get to work in Google Chrome, but they also said there was chatter about it in a Google Forum as well. Regardless, I’ll keep trying and hopefully one day soon these work-arounds will be moot.
I can concur with Owen as I did have this problem initially, but simply forgot to mention it, so my apologies.
The simple solution is to have a Start Course button that appears when the first slide comes up (perhaps it can fade in for effect or something similar) and once the user clicks on that, the first interactive element of your slide is triggered, whether it be a new layer or a voiceover that you originally had set to trigger when the timeline started for the slide, for example.
Not only does this now start your course rolling (something that users won't find unusual as Start Course buttons are frequently used in E-Learning), but it will also act as the initial interaction with your slide before you execute the javascript to play your audio. To the user, this will appear seamless.
With my recent project, I have got round this by giving the user a choice of background music. Their action of selecting the music is what triggers the whole process.
Thank you, Ned! Very much appreciate the additional info!
Get Outlook for iOS
CONFIDENTIALITY NOTICE: This transmission (including any attachments) contains information which is confidential and/or subject to the attorney-client or work product privilege, and is intended solely for the recipient(s) identified above. Any interception, copying, distribution, disclosure or other use of this transmission or any information contained in it is strictly prohibited, and may be subject to criminal and civil penalties. If you have received this transmission in error, please immediately reply via e-mail, and then delete the transmission from all forms of storage and destroy all hard copies.
I created my slides I wanted to have music across all of them. Then I saved it as a video. Then I started a new project and pulled my video that I had created into the new project. That video is now on just one slide. I added my music and it plays across all the slides that I wanted the music to be on. Its easy to do if you don't need any interaction and you can have all the slides just automatically play and saved as a video.
I just tried this technique and, like some others, I am not able to get it to work. I have published to both review and web, and I tried both Chrome and Edge browsers to no avail. Not quite sure what I'm doing wrong as I'm not very proficient at Javascript.
Could someone take a look at my code and tell me what I can do differently? Thank you in advance!
Hey Leslie, there is nothing wrong with your code, rather it appears to be a problem with the order of your triggers.
Currently, when you click the "play" button, the actions are in the following order:
Jump to next slide
Execute JS.
Because the first action jumps to the next slide, the JavaScript does not get executed.
Simply move the Execute JavaScript into the first position so that it executes first and you should be good to go.
2 more things to note.
Users will not be able to play a song from your desktop. Be sure your song is hosted somewhere that they can stream it from. I didn't have access to your song, so in my published example, I'm streaming one from Music Catalog | Stock Music | Soundstripe
50% volume is quite loud for background music. In my example linked below, I've dropped it all the way down to 5%. (.05 value in the code).
Wow, that is so helpful! Thank you so much! I always forget to check the order of my triggers and it was late working on this last night. I got it to work!
What would the line of JavaScript be if I use Owen's 2nd option? Where do I put the relative link?
Reference:
2. put it in a folder. Add a blank html page with the file name index.html in the same folder. Create a scene that the user cannot navigate to and on the one slide in the scene, insert a web object. Point to the folder that contains your music and the index.html page. StoryLine will assume that everything in that folder are assets for the web page sot it will import all of them. Publish once. This allows you to see the folder name SL assigns your assets. Now you have a relative link to the file.
I followed the Javascript instructions and received this error message: "Some of the media in this project cannot be included in this video." I am also wondering how Storyline 360 has not made it possible to easily add continuous music to the background when they have the capability to create videos. I would love to see this feature added in. I have a feeling company firewalls might be preventing me from "linking" the video from a C-drive folder to Storyline?
You most definitely cannot point to a c: drive location. It either has to be a relative link to a subfolder in your published files or an html link to a location on the web.
This is SO helpful. Thank you! Is there a way a music track can be repeated throughout the course via JavaScript? Meaning, once the track is over, can it be auto-played again?
On the Insert tab, select Audio, and then Audio from File. In the file explorer, locate the music file you want to use and then select Insert. With the audio icon selected on the slide, on the Playback tab, click the list named Start, and select Play across slides.
53 Replies
Good grief – will there ever be an easier way to do this? I’m back to Emily Ruby’s original post, which seems to be a fairly easy way to do this, but I don’t get a story.html file (which didn’t work for some people) nor an index
Hi Dawn,
It sounds like you are getting a bit overwhelmed by it all, so I have tried to put it in simple steps below.
1. In order to set up your audio file in the Resources tab do the following:
a. Click on the Player button on the ribbon bar at the top of the screen.
b. Click on Resources at the top of the Player Properties dialogue box and then the Add button (looks like a folder) at the bottom left.
c. Select the File option in the Add Resource dialogue box and browse to the location of your audio file and select it.
d. If necessary, edit the Title for the audio file and click Save.
e. Select the Features tab in the top left and then click the Resources check box:
This will place a Resources tab in the top bar of the Player when your SL project file runs.
A copy of your audio file will now be saved as part of your SL project and, when you publish it to the web, it will appear in the external_files folder, which, as I mentioned in my previous post, will be found inside the story_content folder.
2. To set up your javascript trigger (for the sake of this example, I am assuming your audio file is called "my audio file.mp3"):
a. amend your js as follows:
var audio = document.getElementById('bgSong');
audio.src="story_content/external_files/my audio file.mp3";
audio.load();
audio.play();
Your other js looks okay, so you should only need to change the code for the trigger that loads and plays the audio.
3. The final part is to publish your project to the web and then give it a try.
If you don't want to have a Resources tab on the screen when users are viewing your course, this will have to be done slightly differently. However, if you follow the instructions above, you will be able to prove that the audio is working as you want it to. The adjustments that then have to be made will be quite straightforward, so don't worry about it.
Hope this helps.
Thank you so much! I do know how to add a Resources element in the player. The only thing in your excellent and much appreciated guidance below is when you mentioned “publishing to the web”. I’ve been publishing to the LMS (we use the rise.com LMS) because that’s where my eLearning will be accessible to my users. Does not publishing to the web negate the process? Or do I have to do something different to make all of this work if I’m publishing to LMS?
Many thanks,
Dawn
Get Outlook for iOS
CONFIDENTIALITY NOTICE: This transmission (including any attachments) contains information which is confidential and/or subject to the attorney-client or work product privilege, and is intended solely for the recipient(s) identified above. Any interception, copying, distribution, disclosure or other use of this transmission or any information contained in it is strictly prohibited, and may be subject to criminal and civil penalties. If you have received this transmission in error, please immediately reply via e-mail, and then delete the transmission from all forms of storage and destroy all hard copies.
The solution is the same and works the same for both Web and LMS publishing options. :-)
Thank you so much!! I will try this!!
Dawn Horner
Sr. Director, Sales Training
dhorner@coherus.com
333 Twin Dolphin Drive, Suite 600
Redwood City, CA 94065
Office: 650.395.0236
[logo]
Hi Owen,
I wanted to update you on something. Whichever solution works by playing background audio no longer works with the latest Google Chrome browser! Which is my company’s default browser! My IT dept worked on this for me and they could get your solution to work in Firefox but not Chrome. Apparently Chrome now blocks background audio!
So, I wasn’t quite as inept as I thought! 😉
Dawn Horner
Sr. Director, Sales Training
dhorner@coherus.com
333 Twin Dolphin Drive, Suite 600
Redwood City, CA 94065
Office: 650.395.0236
[logo]
Hi Ned,
I wanted to update you on something. Whichever solution works by playing background audio no longer works with the latest Google Chrome browser! Which is my company’s default browser! My IT dept worked on this for me and they could get Owen’s/your solution to work in Firefox but not Chrome. Apparently Chrome now blocks background audio!
So, I wasn’t quite as inept as I thought! 😉
Dawn Horner
Sr. Director, Sales Training
dhorner@coherus.com
333 Twin Dolphin Drive, Suite 600
Redwood City, CA 94065
Office: 650.395.0236
[logo]
CONFIDENTIALITY NOTICE: This transmission (including any attachments) contains information which is confidential and/or subject to the attorney-client or work product privilege, and is intended solely for the recipient(s) identified above. Any interception, copying, distribution, disclosure or other use of this transmission or any information contained in it is strictly prohibited, and may be subject to criminal and civil penalties. If you have received this transmission in error, please immediately reply via e-mail, and then delete the transmission from all forms of storage and destroy all hard copies.
It actually still works on chrome. However, you have to have the user interact with the page 1st before executing the JavaScript to start the music. In the example below, the music starts playing when you click either of the puzzle pieces that you can move.
https://360.articulate.com/review/content/f8f8411d-262b-4e99-8067-cd1d60139304/review
In other words, once you interact with the page, the browser will allow media.
Hi Owen,
To be clear, I honestly can’t say which solution my IT could not get to work in Google Chrome, but they also said there was chatter about it in a Google Forum as well. Regardless, I’ll keep trying and hopefully one day soon these work-arounds will be moot.
Thanks again!
Dawn Horner
Sr. Director, Sales Training
dhorner@coherus.com
333 Twin Dolphin Drive, Suite 600
Redwood City, CA 94065
Office: 650.395.0236
[logo]
Hi Dawn,
I can concur with Owen as I did have this problem initially, but simply forgot to mention it, so my apologies.
The simple solution is to have a Start Course button that appears when the first slide comes up (perhaps it can fade in for effect or something similar) and once the user clicks on that, the first interactive element of your slide is triggered, whether it be a new layer or a voiceover that you originally had set to trigger when the timeline started for the slide, for example.
Not only does this now start your course rolling (something that users won't find unusual as Start Course buttons are frequently used in E-Learning), but it will also act as the initial interaction with your slide before you execute the javascript to play your audio. To the user, this will appear seamless.
With my recent project, I have got round this by giving the user a choice of background music. Their action of selecting the music is what triggers the whole process.
Thank you, Ned! Very much appreciate the additional info!
Get Outlook for iOS
CONFIDENTIALITY NOTICE: This transmission (including any attachments) contains information which is confidential and/or subject to the attorney-client or work product privilege, and is intended solely for the recipient(s) identified above. Any interception, copying, distribution, disclosure or other use of this transmission or any information contained in it is strictly prohibited, and may be subject to criminal and civil penalties. If you have received this transmission in error, please immediately reply via e-mail, and then delete the transmission from all forms of storage and destroy all hard copies.
I created my slides I wanted to have music across all of them. Then I saved it as a video. Then I started a new project and pulled my video that I had created into the new project. That video is now on just one slide. I added my music and it plays across all the slides that I wanted the music to be on. Its easy to do if you don't need any interaction and you can have all the slides just automatically play and saved as a video.
Hi Owen (or anyone else who can lend a hand!),
I just tried this technique and, like some others, I am not able to get it to work. I have published to both review and web, and I tried both Chrome and Edge browsers to no avail. Not quite sure what I'm doing wrong as I'm not very proficient at Javascript.
Could someone take a look at my code and tell me what I can do differently? Thank you in advance!
Here is the link and the storyline file is below.
Hey Leslie, there is nothing wrong with your code, rather it appears to be a problem with the order of your triggers.
Currently, when you click the "play" button, the actions are in the following order:
Because the first action jumps to the next slide, the JavaScript does not get executed.
Simply move the Execute JavaScript into the first position so that it executes first and you should be good to go.
2 more things to note.
I hope this helps!
https://360.articulate.com/review/content/7658d077-45fd-4d7b-897c-738ba85f23e4/review
Hi Owen,
Wow, that is so helpful! Thank you so much! I always forget to check the order of my triggers and it was late working on this last night. I got it to work!
Congratulations!
What would the line of JavaScript be if I use Owen's 2nd option? Where do I put the relative link?
Reference:
2. put it in a folder. Add a blank html page with the file name index.html in the same folder. Create a scene that the user cannot navigate to and on the one slide in the scene, insert a web object. Point to the folder that contains your music and the index.html page. StoryLine will assume that everything in that folder are assets for the web page sot it will import all of them. Publish once. This allows you to see the folder name SL assigns your assets. Now you have a relative link to the file.
Just wanted to thank you! I was able to host it in our media management portal
Fantastic!
I followed the Javascript instructions and received this error message: "Some of the media in this project cannot be included in this video." I am also wondering how Storyline 360 has not made it possible to easily add continuous music to the background when they have the capability to create videos. I would love to see this feature added in. I have a feeling company firewalls might be preventing me from "linking" the video from a C-drive folder to Storyline?
You most definitely cannot point to a c: drive location. It either has to be a relative link to a subfolder in your published files or an html link to a location on the web.
This is SO helpful. Thank you! Is there a way a music track can be repeated throughout the course via JavaScript? Meaning, once the track is over, can it be auto-played again?
That should happen automatically once the "play" command in the JavaScript is executed.