How can I add music to my preloader?

Design help Custom code
1

Hello Webflow,

I have a client who wants their preloader to have sound. I understand that browsers don’t support this anymore and it’s recommended to have an audio player that users can control if they want to turn off the sound.

Does anyone have custom code to do this, and where and how can I embed this into my site.

Thank you for your help.

EDIT: I added an audio controller on the top right and embedded custom code with a help of a cloneable I found on Webflow’s showcase page, it doesn’t work. How can I fix this? Also, are there any unnecessary code that doesn’t need to be there.

This is the cloneable where I got the code and audio controller. The music works perfectly on his site: https://webflow.com/website/Enter-with-Music-Howler-JS?ref=showcase-search&searchValue=howler%20js

My HTML Embed:

image
image1300×666 61.9 KB

EDIT 2: I think I realized the issue, I’m not completley sure, but I think that in order for the audio to play, the user needs to click a button. How can I manipulate the code so the song automatically plays without having to click a button?

Live Link: https://blue-sky-experience.webflow.io/

Here is my site Read-Only: https://preview.webflow.com/preview/blue-sky-experience?utm_medium=preview_link&utm_source=designer&utm_content=blue-sky-experience&preview=f6705ffff1ca852a8ae3f7d85742dd34&workflow=preview

2

There lies the problem. Audio needs to be triggered by user interaction.

3

Does this mean I can’t autoplay… I added a mute button on the top right corner if they want to stop the music.

4

I suggest reviewing this MDN doc on the subject. Autoplay guide for media and Web Audio APIs - Web media technologies | MDN (mozilla.org)