Background Audio Cool Trick

May 23, 2016

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!

Pinned Reply
Luciana Piazza

Hello, Everyone! ✨

I'm happy to share that we have released a new update for Storyline 360 (Build 3.79.30834.0).

In this update, we have an enhancement where:

As a first stepI recommend updating Storyline 360 to the latest version. Here's how:

Update Authoring Apps

If you have any questions, please let us know in this thread or privately in a support case.

Have a great day! 

280 Replies
Jürgen Schoenemeyer

A simulated click via Javascript is a clear attack on users. The user must have at least made a 'user interaction' on the page (Chrome) or tap a button per audio object (iOS Chrome, Safari, Firefox) or set the domain on a whitelist (Firefox).

The only method accepted by all current/future* browsers is the use of promise and possibly showing a button.

https://developer.chrome.com/blog/autoplay/

var promise = document.querySelector('audio').play();

if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}

*as far as you can see into the future

OWEN HOLT

Sorry, senior moment on my part, I was thinking of internal to Storyline audio files.  
You are absolutely correct that the user must interact with the page. However, you can use something like a "Play" or "enter course" or any other user interaction at the start to trigger the music to play for the remaining duration of the course.  As long as you are ok with your opening slide being silent, this works.
The JavaScript I was referring to was not to get around the browser requirement, rather, to add the music in real-time rather than modifying any html pages after the fact.

https://360.articulate.com/review/content/21ff5cbe-f600-4674-b317-eb89419f6206/review

Jürgen Schoenemeyer

fun fact: exactly this problem (how to start an audio automatically) had been a bug in storyline for years - which now leads to the fact that all courses with audio from the last years have to be re-published to start with firefox 103* and newer.

autoplay with audio is a minefield

* there was a special (not ever tested) firefox solution integrated, which did't worked

Eric Santos

Hi everyone!

I have some great news to share. We just released another update for Storyline 360. In Update 74, we've included important fixes and new features.

One of the new features we've included is: 

  • Create immersive experiences with continuous background audio that sets the tone and keeps learners engaged.

Launch the Articulate 360 desktop app on your computer to take advantage of this update, and click the Update button next to Storyline 360. You'll find our step-by-step instructions here.

Please let me know if you have questions!

Luciana Piazza

Hello, Everyone! ✨

I'm happy to share that we have released a new update for Storyline 360 (Build 3.79.30834.0).

In this update, we have an enhancement where:

As a first stepI recommend updating Storyline 360 to the latest version. Here's how:

Update Authoring Apps

If you have any questions, please let us know in this thread or privately in a support case.

Have a great day!