Need Help to Load Background Audio Via Javascript

[Lee Millard]

Hello! I am trying to add background audio to a project, but because we had a custom workaround to auto-advance past the "start" screen (one with play button), the background audio doesn't get loaded. I tested this out without our auto-advance and it works. My question is, does anyone know a command to load the background audio, say on slide 1 rather than the project play button? Any fancy JS? How could I find out what triggers it to load? Ideally, I have Slide 1 where I DO NOT need the bg audio playing, but then need it to play starting on Slide 2.

I saw someone else post about this last year, but I did not see a solution.

Thanks in advance!

[Lilybiri]

Maybe you should explain the 'custom workaround'?  I never have issues with my workaround, reason for this question. Of course I have accepted that browsers prevent AutoPlay and just try to make the start screen better using a poster image etc. 

You did see that the other thread also had a similar 'workaround' causing this problem, an my intuition about the possible origin. There are no system variables linked with individual types of audio, and background audio is the worst for control.

[Lee Millard]

I have a cpAPIInterface.play(); function running at the start to bypass the play screen. I'm not sure if it's not allowing the audio to load. If I publish without this function, but I execute it in the Console, the audio loads. It definitely has something to do with bypassing the start screen. I was looking to see if there were any functions that would load the background audio.

[Lilybiri]

I am aware of the problems with that JS command, especially on some mobile devices.  Background audio needs to be loaded On Enter for the first slide, and probably there is not enough time. You didn't use JS to check if everything was loaded?  One of the reasons why I use a poster image, accepting the fact that Autoplay is not guaranteed. That poster image can provide information, to make it at least useful.  I never keep the ugly play icon on the white background. 

Wait for the JS experts, but apparently the other user didn't get a solution neither. 

[kdmemory]

Hi Lee

Maybe I misunderstand. You are always saying "... the background audio doesn't load ...". Does that actually mean it doesn't play? IF SO ...

In modern browsers you can't start playing any audio (this includes video soundtracks) without a definitive agreement of the user. Normally this agreement is given by the user through a click on a button. In case of a Cp webapp it's the play button on the normal "start" screen. Which of course can be tuned up by the poster image workaround, Lilibiri is suggesting.

No fancy Javascript needed. It's simply a legal issue.

This is i.e, when you click a link to a YouTube page with a video and this is the first time in your browsing history of that session that you hit a YouTube page, the video doesn't start automatically. It waits for you to press the play button. Years ago before the rule change it did start playing automatically.

...

Klaus

[Lilybiri]

Thanks @kdmemory  Klaus for a better explanation for my intuition.  Reason why I always try to explain not to avoid that Play button, but to enhance the experience. Just using JS (command or script) without understanding why is one of the big problems for many CP developers. They see JS as a magic tool..

[Lee Millard]

You are correct to point out my incorrect terminology. It does load, and it does eventually play, but not until Slide 6. I can then hit the previous buttons and it will play on previous slides that it's set to play on. But it doesn't start to play until Slide 6.

[Stagprime]

I use JavaScript to trigger audio clips all the time but they are bound to a single slide and will cease playing if you navigate to the next slide.

As was already mentioned, bypassing the big play button does not satisfy the user interaction requirement put in place by the browser. As long as you have the users clicking with their mouse to navigate or some other interaction with your project - this should allow auto play and software based clicks (JavaScript) to function as expected going forward. However, that means any first slide onEnter JavaScript used to trigger audio will be ignored.

The big play button is an Adobe response to auto play but the auto play itself is a browser restriction. We can bypass the play button because the browser does not care - we cannot bypass the browser restriction

If you just have some light looping music as background audio - you might be able to simply trigger it on each slide but it will always start from the beginning.

The hack I use is to place a smartshape as button on the screen somewhere. Make it small and transparent - tuck it away somewhere inconspicuous and have it timed for the rest of your project. Set the button success action to play audio and select your audio.

document.getElementById("buttonName").click();

Use the code above as an onEnter action to each of your slides starting with slide 2 and replace the name of the button with your own. 

Again - the audio will always start from the beginning. If you require something to continue where it left off from slide to slide - I am afraid I do not have any tricks for that one.

[Lee Millard]

Thank you for this information. I think you have a great solution here, but I'm afraid it won't work for my situation as I'm looking for a single loopable track to span slides, but not be tied to a specific time frame (users can control how long they stay on a slide). I'll keep exploring. Thanks!