Background Audio Cool Trick
By
Emily Ruby
Hi All,
Just wanted to share a way to add audio across all slides in Storyline 2 There are a few posts on here about this, and I found this method to be super simple.
**Please note that this is just a cool trick, and not a built in feature of Storyline 2.
Publish your course, open the story.html file with Notepad, scroll to the bottom and add this code
<audio src="YOURAUDIOHERE.mp3" preload="auto" autoplay loop></audio> with a space before the </body> and place your audio file into the published output folder and there you go. That is it.
Here is an example, http://bit.ly/1sy5dkV and the output folder is attached.
Have fun!
247 Replies
Hi Andrea,
Try making the changes in the published output folder once it's finished publishing in Storyline and don't close down the Publish successful window in Storyline - using the zip button there often works better than manually zipping it.
You could use Jackson's trick to import the files into your StoryLine published content using a hidden web object slide.
Once published, you will use JavaScript to play the music and control the volume. His post includes the script and instructions.
See the instructions here: LINK
I cant get this to work in Storyline 3 for some reason. Worded fine in Storyline 2.
Hi Wilson,
Emily's original code does not work in SL3/360 based on changes made to the publishing engine, but you may want to take a look at the example shared by Owen earlier to use the Javascript. I linked back to one of his examples here.
This is great! Thank you for sharing.
Thanks for the update.
Hi
This works great locally but when I upload it to Tempshare for testing the music is gone.
Does anyone have any ideas why it wouldn't work? Thanks
Hi Phil,
I haven't heard that the music goes missing in Tempshare - does the rest of the course play normally? How did you publish it, with HTML5 included or not?
Hi Emily, this was so helpful! I do know html and js but I dont know how to deal with this storyline. So thank you so much. For reference, if you cant make it to work in chrome try it in microsoft edge or IE cause chrome doesnt work to me either. Cheers!
Thanks Flor for that update - glad you found this resource helpful!
This is awesome!! Worked perfectly for a system video demo I built. We decided against voice over and simply wanted instructions on the screen and background music this was an excellent work around! Thank you so much for the post!
I haven't been able to find a work around this issue. I'll post this as a feature request and I recommend anyone needing this in their work do the same.
I tried the JS solution, but found it too cumbersome and worried about support for SCORM and our LMS. So, my solutions so far are to 1) use Storyline 360 and build everything in 1 slide with an imported audio file and then develop all the content in a TON of layers, or 2) use different product like Captivate or Camtasia.
I've used the JS solution on Sl1, SL2, and SL3 without any issue when publishing to web or using scorm on our lms. I don't find it to be cumbersome at all.
What would be cumbersome to me would be building an entire course on one slide!
I was able to have it work in my project. The issue that I encounter was that the audio narrations added on each slides are not playing. Would you happen to have a workaround on this?
This works perfectly on my project. Thanks! My problem now is that the audio narrations per slide are not playing. Would you happen to have a workaround?
Hey Ken,
Sorry to hear you're having trouble with this, and I saw you mention it in another older discussion too. Can you share a copy of your .story file here so that folks can take a look? That'll be the best way to get help for this custom audio set up!
Hi - I am noticing that inserting the code <audio src="Summer_Smile.mp3" preload="auto" autoplay loop></audio> works beautifully when I play the course in IE but does not play in Chrome. Did I miss the instructions in this thread? any suggestions?
Thank you!
Hi Suzanne,
The background audio plays when you are viewing the Flash output. So, make sure you have Flash enabled, and view the Flash output that Emily shared in her original post.
However, if you view the HTML5 output, it won't work. As shown here.
You can fix this by making the same code modifications to your story_html5.html file as you did to the story.html file. See here for details.
Or... even better... you could use this approach. It'll give you a bit more control over things. Owen has shared a sample file here.
Thank you Matthew. You are awesome!
No worries Suzanne, so are you!
Matthew, one more question please
I used the code modifications and the background music plays great. Is there a way to get the music to stop playing after say 6 minutes if it is added to the html files?
Thanks again!
All this talk about Background music, wondering folks find free background music?
Any suggestions?
Thanks
Yes, definitely possible, but you'll need to use a different approach.
Have a look at the work Jackson has done here. I don't remember if he shows how to stop the audio after a set period of time, but It should be relatively easy to modify it to stop after 6 minutes.
I'm flat out today so won't have a chance to put a sample together, but hopefully, someone can help you with this.
I know this is an old thread, but wondering if this works for anyone on SL3? Our LMS uses the index_lms_html5.html file, and that's where I added the code (before the closing <body> and <html> tags). It works if I click on the file from my published files/folders, but not once put out on the LMS.