Use gui elements as divs

Hi!

Im wondering if you can use Babylon.js GUI elements as a div. I would like use wavesurfer.js to create a waveform in the scene. Is it possible? If its not, does babylon.js allow for waveform creation?

I am wondering which one you are trying to achieve ?

rendering wavesurfer rendered wave form in babylon -> use a dynamicTexture to wrap their canvas.
rendering babylon scenes in wavesurfer -> is is only possible if they use 3d contexts.

The first one. I would like to display the rendered waveform onto a dynamic texture.

As a dynamicTexture is a simple wrapper around a canvas it should be pretty straightforward else you could do it straight in 3d:
https://playground.babylonjs.com/#TUR5GH#0

1 Like

how would I go about making a wrapper? I like how wavesurfer allows for play/pause and audio controls

you could try as we do with pixi: https://jsfiddle.net/7bjut0k3/1/

we simply wrap the pixi canvas in a texture.

Wavesurfer uses a div, so i tried changing a couple things, but it just shows up as all black

You can not do it with a div, it needs to be a canvas

How can I make a canvas be a div but still a canvas if I cant have a div?

This is not possible unfortunately but wavesurfer is using canvases:
image

Annnd how does that help? How can we hook into that?

I do not know wavesurfer but you could find those canvases and use them as we do in the pixi example I shared earlier. (document.querySelector…)

Ok, ill try it out.

But another question, does babylonjs have something like what wavesurfer offers, or is it just the visualizer?

Basically we allow to hook with webaudio analyser and then you can create what you want but we do not offer some built in visualization.

You can find some more examples in playground using the analyser: Babylon.js Documentation

Ok, thanks ill look into that too.

Hello!

I don’t know if it is quite what you’re looking for, but i think Babylon has some audio visualization you can see using BABYLON.Analyser.drawDebugCanvas()

https://playground.babylonjs.com/#QLYZ3S

I think if you want to create something like with wavesurfer, you’d need to do some playing around with the analyser node. Maybe these resources might be helpful to you: