Wavesurfer createElement

[gabrielechiossi]

I am trying to implement wavesurfer in this little project that I am doing.
It is a web recorder, I am trying to make the wavesurfer a const that would move with all my other const in the javascript.
I will attach some pics and code because it is pobably easier to visualize this than try to explain it.

As you can see the wave sound does not follow the web player. What I want is the wave sound of the web player with the button and then another wave with its web player and buttons.

What I tried to do is make the wavesurfer as the other consts (commented code in the pics) but it does not work anybody can help me.

[thijstriemstra]

Try backend: 'MediaElement'. Having opus in a wav container also seems problematic..

[gabrielechiossi]

Try backend: 'MediaElement'. Having opus in a wav container also seems problematic..

Where would I add it? Should I add it for const wavesurfer = document.createElement('div')? Also, what is opus?
I am sorry I am new to js and wavesurfer.

[sundayz]

When you create a new waveform you specify its container, and you are setting it to #waveform. IDs in HTML need to be unique. Thats why every time you create a waveform theyre all appearing in the same place.

When you create the div which contains the waveform, instead of giving in the id "waveform", do something like this:

var myUniqueID = "#waveform" + (Math.random() * 100);

And then you specify that uniqueID when you use the function WaveSurfer.create and give it a container.
Math.random() is not the best way of making a unique ID, so know that in the future you will have to do something else :)

[gabrielechiossi]

When you create a new waveform you specify its container, and you are setting it to #waveform. IDs in HTML need to be unique. Thats why every time you create a waveform theyre all appearing in the same place.

When you create the div which contains the waveform, instead of giving in the id "waveform", do something like this:

var myUniqueID = "#waveform" + (Math.random() * 100);

And then you specify that uniqueID when you use the function WaveSurfer.create and give it a container.
Math.random() is not the best way of making a unique ID, so know that in the future you will have to do something else :)

Where would I put this myUniqueID?
Line 66 instead of the const wavesurfer?

[sundayz]

Sorry, we can't make your app/website for you. Just make unique containers for each wavesurfer, how you do that is up to you.