🤔 - Plugin works as expected when page is updated, breaks on a refresh

Need help Plugins
1

Hello!

I am working on a project for a side gig, and I am trying to make an audio visualizer plugin. I have it working well, except for the fact that when you refresh the page it breaks completely.

Here is the plugin working:

Perfect, right?

Wrong. The plugin only works as expected on the plugin test app, when the page is required by bubble to be reloaded (either the code updated, or page updated).

The problem

The problem is when a page is refreshed and no changes are made, the audio player won’t actually output any sound, and thus, the visualizer doesn’t work.

What debugging have I done so far

Here is what I’ve crossed off the list:

  • The audio element itself still maintains the correct source
  • The visualizer itself still works. I did some console logging, and the visualizer is just receiving a bunch of 0s from the context node.
  • The play function is correctly called

I’m at a loss at this point. The audio source remains correct, but it’s as if the browser just says “nah fam im good” - with no errors, or anything. Just doesn’t want to play the audio.

However, if I do any updates that trigger Bubble to require a page reload, it works perfectly on that first load.

Some information

  • The audio element is created in the initialize function
  • The audio source is set in the update function
  • The MediaElementSource is created in initialize function, along with the AudioContext and the analyser.

Someone please save my sanity?

2

Have you looked into how some browsers(or most, if not all) block the ability to autoplay video or audio?

1 Like
3

Yes, and I actually disabled auto play for now as well. Currently it is a button that triggers the play action.

1 Like
4

I don’t understand how it is working initially and then when the page reloads it does not. Because a page reload seems like it would then need to be working initially again.

5

Thank you! That’s why I am so confused. But when I move the button even a pixel and trigger Bubble’s refresh required, it works fine that first load. It’s so confusing. Maybe a bug? I don’t know. Might have to reach out to Bubble support.

6

Oh I see so it works the first time you say and then when you make edits to your application and refresh from that it works too. But anytime between it does not work?

7

Correct.

Works when:

  • Code is changed (even just a space added); or
  • Bubble page is updated

Doesn’t work:

  • Any other normal page load / refresh
8

Maybe something is cached or stored on the initial time it plays and that causes it to not play again on a refresh. Is it fairly simple straight forward js and jquery or anything else too? Have you tried it on a page without the ads? Maybe the ads are affecting it.

I would try adding it to an empty page by itself and testing it there.

9

It’s all straight forward JavaScript, nothing super fancy. Here is my initialize section:

Initialize 
function(instance, context) {
instance.publishState("isplaying", false);
instance.data.audioElement = document.createElement("Audio");
instance.data.audioElement.id = "OOCRadio_Player";

instance.data.audioContext = new (window.AudioContext || window.webkitAudioContext)();

instance.data.analyser = instance.data.audioContext.createAnalyser();
instance.data.analyser.fftSize = 256;   

var audioContext = instance.data.audioContext;
var audioElement = instance.data.audioElement;
var analyser = instance.data.analyser;

instance.data.sourceNode = audioContext.createMediaElementSource(audioElement);

var source = instance.data.sourceNode;

source.connect(analyser);
analyser.connect(audioContext.destination);
}

I’m actually testing it on a completely new app, with no ads or anything.

When you click the button, you can see it turns red. The red is the canvas that gets drawn on. I had a console log for the data being sent from the context node, and it’s sending all 0’s, which is telling me that for some reason, the audioPlayer is having issues on page reload. I’m not sure.

10

On the first link you posted with the ads on it, the thing is still working for me. The bars are moving and everything every time. Is that expected? It is muted though and I can’t unmute it.

11

I didn’t post a link at first :eyes:

But yes, on our main website, oocradio.com, it is functional on most. The problem is on some users end, it’s not working. So, I changed up how it all works on the back-end to be more compatible, which ultimately has led me to the issues we are seeing now lol.