Using Audio Files in Custom Code

Hello. I'm creating an "audio snippets" section with custom code. mp3 files are processed through WaveSurfer.js to create waveforms, so neither Squarespace "Audio block", nor <audio> tags are suitable here. The files need to be accessed via Javascript. Is there any way to upload audio files that can be accessed with custom code?

When trying to use links to Drive, Dropbox or Github, it throws the "‘ CORS Access-Control-Allow-Origin’ missing" error.

I can provide my JS and HTML code or full console error if needed.

Link to the website: https://www.clashandtoro.com/
Password: risky
 

Thanks in advance!
 

9 minutes ago, ThomasDes said:

Is there any way to upload audio files that can be accessed with custom code?

You can upload files from any Link Editor, assuming they are 20 MB or smaller. 

Did this help? Please give feedback by clicking an icon below  ⬇️

25 minutes ago, paul2009 said:

You can upload files from any Link Editor, assuming they are 20 MB or smaller. 

Did this help? Please give feedback by clicking an icon below  ⬇️

I tried adding a link to "Not linked" pages and fetching the file from there ("https://www.clashandtoro.com/s/Lynn-Hill.mp3") but that didn't work either. Still throws the CORS error. Is there a different method to do this? I'm on  7.1

2 hours ago, paul2009 said:

You can upload files from any Link Editor, assuming they are 20 MB or smaller. 

Did this help? Please give feedback by clicking an icon below  ⬇️

I made more attempts to get this to work and no luck yet. I'm using this syntax

     <div class="carousel-item">
        <div class="image-container img-2"></div>
        <p>Lynn Hill</p>
        <div id="waveform2" class="waveform"></div>
        <p><a id="play-pause2" href="#" class="listen-link">Listen</a></p>
        <audio id="audio2" src="/s/Lynn-Hill.mp3" preload="auto"></audio>
    </div>

And then wavesurf.js is processed in the head code injection. All of this works locally but on Squarespace the waveforms don't show up.

The "/s/Lynn-Hill.mp3" is the short version of "https://www.clashandtoro.com/s/Lynn-Hill.mp3"  , an audio file uplaoded on that same page.

I didn't experience any issues trying to reference the file using code. For example:

<script>
new Audio('/s/Lynn-Hill.mp3').play()
</script>

That said, your site is now password-protected so I'm not able to troubleshoot further.

It's always been!

Link to the website: https://www.clashandtoro.com/
Password: risky

True, that way the audio plays without any problem. Then why could it be that my carousel code section can't find it, and throws the CORS error every time? If you open the console you'll see the errors.

@paul2009 I would like each button click on my site to play a one-second sound. I have the file uploaded (/s/pickleball-hit-2.mp3). What code can I add so that a button click will not only play a sound (instead of downloading the audio file--which its currently doing), but also allow me to link to another page (aka have the button function like an actual button, too)?

website: https://slicepb.squarespace.com

password: pb