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!
254 Replies
It is not. Tricks are still required, but they aren't that hard to implement with a little practice.
I am in desprate need to have music in the background throughout the course. I have tried your files and code and I can not get it to work. I am using storyline 360. someone please tell me what I am doing wrong.
Ideally I would love to use javascript to control what slides play what music.
thanks
dawn
I cannot get this to work in storyline360. Please any help would greatly be appreciated.
dawn
Hi there, Dawn. You mentioned wanting to control which slides play which music. Do you need a single audio file to play throughout the entire course, or can you use different audio files for each slide?
If they are different on every slide, have a look at adding audio to your Storyline 360 slides.
Hi Dawn
Where are you publishing to?
Kind Regards
Suze Ashford-Barnes
Tel: 07788 577004 / 01453 511896
www.bluestaglearning.com
Please note Tuesday and Fridays are my non-working days, I will do my best to reply as soon as possible.
Hi Suze,
Just an FYI - I noticed that your email signature came through when you replied via email. You can remove that if you would like by clicking Edit beneath your response. Here’s a quick Peek video if you need help.
Wow, I'm reading a thread 3 years ago and it still works pretty well today. Thanks!
I spent a good while trying to do the same thing. This will take you about an hour if you work through it, which is relatively much simpler. Not sure if this is still a problem. I've been searching all day for solutions and thought I'd share the one I finally came up with. Good luck! https://community.articulate.com/discussions/articulate-storyline/background-music-demo?page=7
Hi Jill,
Glad that it worked. Did you try it on ios device? iPhone or iPad? did it work on those?
Thanks
This post was removed by the author
Hi Naku.
I did not try on any ios devices.
Hi I have a problem with the JavaScrip solution. I use this code on the first slide:
var audio = new Audio ('podmp3.mp3');
audio.loop = true
audio.play ();
everything is OK in IE (I hear the sound)
but it doesn't work in the CHROME.
Any advice?
Thank you
I think this is because Chrome prevents audio from auto-playing most of the time.
I thought I saw something about how having audio on the first slide doesn't work? Try adding a slide before the one with the audio?
Thank you, It was very helpful, easy to do and creative.
Hi Shelby, may I know how you got this to work?
This post was removed by the author
Jill,
Can you explain what "BEFORE <body> and <html>" means? The original post indicated the line of code be added after you "...scroll to the bottom and add this code with a space before the </body>" - I see one "body" reference at the bottom of my file. I take it we mean pasting the code before the reference "body" with a space between </body> and the end of the code.
Is this correct?
Hi Jill
In HTML, all of the code for the "body" of the page must be placed in between the <body> and </body> html tags. If you are instructed to insert code Before the <body> tag, then you should insert your code before this this tag on the code page. It doesn,t necesarily matter where before, just as long as does come before that tag.
Dave
I was finally able to get it to work by inserting the code below into both the story.html AND the story_html5.html files. The problem now is that the background music is drowning out the VO. I used this code:
<iframe src="YOURAUDIOHERE.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
Does anyone know of a way to set the volume of the background music?
Hi Deirdre,
You will need to open your audio file with a tool such as Audacity, lower the audio level of the file itself, and then save the new file. I saved a 2-3 files until I got it right.
I don't use this code because I find it to be technically buggy and the process is time consuming (hand edit code each time you publish). Instead, I've build projects with only 1 slide and a LOT of layers. Just put the background audio in your slide or a layer... The viewer has no idea the presentation is composed this way. Yes, managing that many layers has it's own issues - but when you click Publish, it works on ALL browsers and mobile devices and has no issues with LMS & SCORM integration.
This post was removed by the author
I second Todd's suggestion. BG audio in the base layer playing in a loop and individual narration audio in each layer on top makes for a seamless and professional result.
If you use the JavaScript solution discussed multiple times in this thread, there is no need to edit the html by hand each time you publish.... and you can have full control over the volume.