Crossfade background music in JS

Problem:

Hi,

What I would like to achieve is fade-out and -in effects with background music. Say, Song A runs from 1 to 10. Slide 11 starts with Song B. The idea would be to have a short slide 10 that is just used for fading out Song A and then fade in song B at the start of slide 11. It seems that once I have made Song A background music, however, I cannot manually fade it out anymore. As a consequence, the transition is always very abrupt. I assume there must be a JS way of doing that - I do not know how, unfortunately.

Ideal would be a crossfade, i.e. on load of slide 11, fade out whatever song is playing at the moment, while fading in a new song. Can this be done?

Thanks in advance,

Rolf

ActivePresenter version: 10

OS: Win 11

Notes:

Hi Rolf,

You can achieve this by adding a script to the Project’s On Load event.

Also, make sure that your audio files:

  • Are set to Play over Multiple Slides
  • Are set to Initially hidden
  • Do NOT have Autoplay checked

For more details, kindly check out the attached file.

fade_background_musics.approj (2.0 MB)

Regards,

1 Like

Thanks a lot!

The project seems to work, it crossfades the two audios on slide 4, but I do not see how that is happening. Apart from slide one all slides seem identical to me.

Also: I only see one command in the Exececute JS: atomiUpdateBackgroundMusic();

What am I missing?

Thanks, Rolf

As mentioned before, the JavaScript is added in the Project’s On Load event. Please check here:

File > Project > Properties > Interactivity tab > On Load event > Execute JavaScript

That’s why all slides look identical — the fade logic runs globally at project level, not on individual slides.

The atomiUpdateBackgroundMusic(); line you see is just the default command. The actual crossfade behavior is handled by the script added in the Project On Load event.

Regards,

Okay!!! Thank you!!! I didn’t even know that existed (even though you made it very clear). Excellent!!!

1 Like