Web Audio API issue - crossOrigin?

Need help
1

Hi all -
I am currently implementing @ZeroqodeSupport Waveform Audio player. It’s a great player, but i want to take it a step further by implementing a visualizer with it.

I am running into an issue where the visualizer will not render. I don’t get any errors that i can see, it just wont render.
I have read quite a bit on crossOrigin, and putting it into the

image
image435×1300 43.4 KB

This is the HTML element i want to render in.
The player itself works. Audio is fine. I have the element tag ‘audioElement’ in the waveform.
this is the code for the rendering of the waveform which i have in the Script/header block of the Settings->SEO area
image
image1163×1373 72.4 KB

Please look it over. At this point im not sure if im missing something stupid, or the issue is with crossOrigin.
Thanks

2

Hey @danimaltex26 ,
Thanks for reaching out and for the kind words about the Waveform Audio Player – we’re really glad you’re enjoying it!

When it comes to implementing a custom visualizer, especially one involving direct DOM manipulation and audio processing via custom code, it does fall a bit outside the scope of the plugin’s built-in functionality and our standard support.

That said, here are a few general tips that might help you move forward:

  1. Cross-Origin Issues: You’re absolutely right to look into crossOrigin. Make sure your audio source supports cross-origin access and that the <audio> element has crossOrigin="anonymous" set before the source is loaded. Otherwise, your visualizer script may not be able to access the audio data due to browser security restrictions.
  2. Timing: Ensure the visualizer is being initialized after the audio element is fully loaded and available in the DOM. Sometimes the visualizer tries to hook into the audio element before it’s ready.
  3. Audio Context & AnalyserNode: If you’re creating an AudioContext and using an AnalyserNode to render the visualizer, double-check that your audio source is correctly connected to the analyser and that you’re pulling data from it in an animation loop.
  4. Testing Environment: Sometimes browsers block certain features in development mode, especially around audio contexts and cross-origin media. Try testing it on a live version or over HTTPS.

Please note that usually our support team does not help with plugin customisation.

Thank you for your understanding and have a good day.

Best Regards,
Zeroqode Support Team

Browse all Zeroqode Plugins for Bubble
Banner_Last3

3

Wow… thanks for all the tips. Yeah, at the moment, i feel like i have a lot of near misses getting it to work, but i will definitely try all these.
Great support as always, guys! Keep it up!
D

1 Like
4

Hey @danimaltex26

Glad to be helpful. Please feel free to reach us again when you need some help or assistance. It will be a pleasure to cooperate.

By the way, if you like our plugin you can rate it by going to the Plugins tab in Bubble editor. Find the plugin by name and give it as many stars as it deserves. We would appreciate it a lot!
Additionally, if you’re open to sharing your complete experience with Zeroqode, please feel free to do so here: Review

Best Regards,
Zeroqode Support Team

Browse all Zeroqode Plugins for Bubble
Banner_Last3

5

This topic was automatically closed after 70 days. New replies are no longer allowed.