Background audio for entire project

Hi Mary,

You might find this link will help solve your problem:

https://360.articulate.com/review/content/d4a27eb2-7c39-4c34-be85-9c3f9a4c32e0/review

This is an excellent tutorial provided by Owen Holt on how to add an audio track that plays throughout the entire course and I can personally vouch for the fact that it works.

With regards to being able to change the volume, I used a slider and trigger to enable the user to adjust the level at any stage in the course by accessing customised audio controls at the bottom of the slides:

Audio Controls (located on the slide master)

Trigger (located on the slide master)

JavaScript

The variable "Volume" is the one that is changed when the slider is moved, so each time the user moves the slider, the variable changes and the trigger then activates the JavaScript. In your case, you could simply set the desired level each time a voiceover occurred.

I hope this all makes sense, but if you have any further queries, just get back to me here.

Hi Mary,

Further to my last post, you may also find this link useful:

https://community.articulate.com/discussions/building-better-courses/playing-background-music-across-all-slides-storyline-360#reply-708892

It will take you to the original post that Owen responded to with the link I sent you earlier. You will also find a number of other posts, including further ones from Owen and myself, helping solve a couple of people's issues with the same problem. This may answer some other questions you may have.

Hi Ned, thanks so much for taking the time to send this information to me. I've read through Owen's tutorial and the discussion thread in detail but unfortunately, I still can't get this to work for me. Like with others in the discussion thread, I think I'm falling down in the step with the URL to the audio file. (I have zero experience of JavaScript so I'm finding my way through the dark here). I've attached a sample and I'm hoping you could take a look when you have time? This isn't my project, just some templates I found in content library (I can't share my actual project but I figure if I can get it to work here I can replicate it in my actual project). I copied the JS from Owen's sample file and just added the folder and audio file name for my file. In Owen's example the path just starts with story_content/external_files so that's what I did...

Hi Mary,

The reason why Owen's example starts with story_content/external_files is because he has placed his audio under the Resources tab (edit the Player options to add Resources) and these are then automatically added to a folder called external_files, which is a sub-folder of the story_content folder. If you don't create any resources, the external_files folder is not created.

I notice from your javascript that you have set up your audio file as:

audio.src="story_content/WebObjects/605VS0Dcn6h/audiofile.mp3"

If, when you publish your file to the web (or LMS), you have a  WebObjects/605VS0Dcn6h/ folder in your story_content folder, which contains your audio file named audiofile.mp3, then it should play. If you don't have the folder, you can manually add it once you have published your course and also add the audio file and it should then work.

The advantage of including your audio in Resources is that the folder structure is automatically created for you every time you publish the course. The disadvantage is that it creates a Resources tab and shows your audio in it, which you may not want.

Hope this helps, but if you are still having problems, just get back to me here.

By the way, don't worry about the "black art" of javascript. I hadn't used it before I saw Owen's tutorial either!

As a workaround for the resources tab, you can use a custom player. Only show the resources on the slide with the external javascript libraries. And on your main slides ensure it uses a player that doesnot has the resources. Then you wont see it.

Hi Math,

Thanks for that useful little tip. I hadn't thought of that option.

Hi Ned, after many failed attempts at the Web Object option I gave up and tried the Resources option instead, (even though it's not ideal that a user can click on it) and I'm delighted to report that it worked! This is such a breakthrough as it has been a major headache for me, thank you! 

Thanks also Math for the tip, I wasn't quite sure how to do this so as another workaround I edited the text label for the Resources tab so that it's now blank and shows as invisible on the player. Technically the learner could still find it and click on it but if they do I doff my cap to them!

I needed to stop the audio for my final few slides as these are quiz slides and I found the music distracting so I managed to add a pause audio JS at the appropriate point. For the volume issue unfortunately your custom button option wouldn't work for me as this music is played underneath a voiceover so I need the volume to decrease automatically when it plays. I noticed in Owen's tutorial that he set the starting audio volume to 50% as follows: 

audio.volume = 0.5;

I played around with the number and found that 0.07 works great for what I need so I adjusted that also. I can't thank you enough for your help and for taking the fear of JS away! 

Hopefully Articulate will add the play audio across the entire project functionality at some point to save having to figure out all these workarounds. 

Thanks again! 

Hi Mary,

I am glad you managed to get everything working okay and I like the workround of making the label invisible. What the user can't see, the user is unlikely to go looking for !

I realised that the volume button wouldn't suit your needs, but I thought that, as you have done, you would figure out that you could use javascript to simply set the volume level you required whenever you needed to.

I agree, play audio across the entire project would be a great addition to Storyline if it saved the designer having to enter the javascript every time.

Hi! I have been successful with the web object and the mute button. Does anyone have the code for reducing the background music volume? I don't want a slider or any audio controls. I tried reducing the volume in Adobe Audition and the background music is still much louder than the narration. Any insight would be helpful. 

// get storyline player
var player, audiofolder, audiofile;
player = GetPlayer();
window.audiotrack = document.getElementById('ambient-music');
//
if (window.audiotrack === null) {
audiofolder = player.GetVar('audiofolder');
audiofile = player.GetVar('audiofile');
window.audiotrack = document.createElement('audio');
window.audiotrack.id = 'ambient-music';
window.audiotrack.controls = false;
window.audiotrack.loop = true;
window.audiotrack.src = 'story_content/WebObjects/' + audiofolder + '/'+audiofile;
window.audiotrack.type = 'audio/mpeg';
window.audiotrack.preload = 'auto';
// append to body
document.getElementsByTagName('body')[0].appendChild(window.audiotrack);
}
// determine if audio is playing
// show the big play button
if (window.audiotrack.paused) {
window.audiotrack.play().then(response => {}).catch(e => {
player.SetVar('showbtnplay', true);
console.log('Couldn\'t play the music becuase....', e);
});
}

Hi Sandra,

I cannot confess to being a wiz with javascript, but noting that you appear to have your music track variable set to audiofile, could you use:

audiofile.volume = xx

where xx is equal to the percentage of full volume that you want  (i.e.  1 = 100%, 0.5 = 50% etc).

My gut feeling is that this would only affect your music track and not your voiceover, but I may be wrong.