Background music

Jul 10, 2019

How do you add background music to the entire project? In Articulate Storyline 360.

Thank you

11 Replies
Zeyn Suliman

Hi Helen,

You can add music to the published folder and then edit your html code to play this when your course is opened in a browser window. Is this the effect you are after? If so, and you are using MS WIndows...

1. Publish your finished course an open the folder containing the published files.

2. Paste the desired audio file you wish to play as background into this folder (see Image 1).

3. Right-click the .html5 file (I think they're always titled story_html5) and open this with notepad.

4. Navigate to the end of the code until you can see </body> (which indicates the end of the html) (Image 2) and insert the following directly before (Image 3) the </body> tag:    <audio src="Exact name of your audio file.mp3" onloadstart="this.volume=0.08" controls loop>
</audio>

Note - This adds a player which can be manually started by the user. The audio src should reflect the exact name of the audio file you pasted into the folder earlier. This.volume= can be changed (1.00=play at loudest volume; 0.1=play at 10% of loudest volume).

5. Save the html document (not save as).

6. Open the story_html5 file in your preferred browser and scroll down to ensure the player displays underneath the module content and works correctly.

There is other code you can add to start the audio automatically, hide the player so users can't mess with it etc. I'm still learning but if you're after something to add on to this method there may be some experienced html users out there who could help with this code.

On a side note, when using music for publications the law generally requires that you do something to credit the author. Under creative commons licensing, you can usually name the author in your publication and that is sufficient.

Hope this helps :)

 

 

This discussion is closed. You can start a new discussion or contact Articulate Support.