Audio Visualiser Extension

[TeckGeck]

I would love to create music players in Gdevelop and an audio visualiser that would react to different audio channels

I noticed that someone else mentioned this +8 years though I wouldn’t know where to start to code this myself:

Creating a audio visual equalizer using three.js

Ok this is my 2nd thread on the other issue I have. I want to have a audio equalizer in the game. Now I’m not going to explain the whole game but its going to be great if I can get this to work. So heres what I know so far… Three.js can create audio visuals such as a audio equalizer. However is made for 3d animation/games -But piki.js isn’t. And made for 2d games However supposedly it doesn’t work with audio. Both are html5 coding. Which is what I’m coding… I also want the app to get the aud…

[giannpls]

This seemed like an interesting idea so I started digging around in the audio engine. It looks like AnalyserNode - Web APIs | MDN would be ideal for this, but you would need to somehow connect the node inside of the Howler sound manager. I would guess it’s possible but I’m not familiar enough yet to say how. I may spend some more time looking into it.

[TeckGeck]

Thanks for getting back to me! I actually ended up making a Template based on this idea alone 2 years later! (minus the audio visualizer)

Music jukebox - a game example from the GDevelop game making app | GDevelop

I know zero about APIs but I really should teach myself how they work because it would be really useful as I’d love to work Twitch integration into my projects as well.
If we figure this out, it’ll make a cool update my music jukebox template!

[ZeroX4]

There is user ZachjuKamashi on gdevelop discord

Discord - Group Chat That’s All Fun & Games

Who got spectrum analyzer made by someone else
I asked him over 1 year ago to @ me when he release it
But since then i never heard from him

You can try contacting him

[giannpls]

I was able to get the analyzer working with the microphone audio, I just implemented a quick animation using a shape painter and the mic frequency data, which you can see at Audio record playback | Play on gd.games (just start a recording with the red circle. You may need to allow mic access to the browser in your privacy settings). Integrating with the built-in GDevelop music events will take some more thought as I have to figure out the internals of their audio engine.

Can you explain more how you would use Twitch? Would you be streaming audio from a twitch URL? Would it use the existing audio actions in GDevelop?

EDIT: I was able to get the output analyzer working but it’s kind of a hack right now. There seems to be something strange with the way the GDevelop engine interfaces with Howler. From what I can tell so far, the GD sound manager playSound() method seems to change the AudioContext, so it seems like I have to recreate the analyzer each time after starting the playback for it to work. I need to poke around a bit more, I think it can still be done but it may make for a clumsier event interface

[TeckGeck]

(Sorry for the late response, I thought I sent this days ago)
Wow! The audio example you linked has massive potential! Props to you for whipping this up so fast!

Can you explain more about how you would use Twitch? Would you be streaming audio from a Twitch URL? Would it use the existing audio actions in GDevelop?

I was thinking out loud sorry, I was thinking it would be fun to learn in my free time if I got serious about it, but I tend to get distracted with new projects frequently. I was thinking something along the lines of a basic chat integration (a user did get something functional here Twitch Test Integration by Bouh, but I remember the first time looking at the project, I understood nothing )

I was able to get the output analyzer working but it’s kind of a hack right now. There seems to be something strange with the way the GDevelop engine interfaces with Howler. From what I can tell so far, the GD sound manager playSound() method seems to change the AudioContext, so it seems like I have to recreate the analyzer each time after starting the playback for it to work. I need to poke around a bit more, I think it can still be done but it may make for a clumsier event interface

It’s cool that you got it working to a certain extent, but then you lost me at “Howler” XD
I’m assuming Howler is built into GDevelop and can be tweaked with Javascripping or other means? I know nothing about coding (hence why I use GDevelop) so you’ll have to be patient with me

[giannpls]

Howler is another open source project that it looks like they have integrated into GDevelop as the sound manager (used for sound/music events).

I have submitted a community extension but I’m not sure when/if it will be available in the app. For now you should be able to download the extension and example project from the GitHub issue New extension: AudioVisualizer · Issue #1408 · GDevelopApp/GDevelop-extensions · GitHub

If it doesn’t get merged eventually I may just make my GitHub repo public.

The example project has two scenes, one for mic recording/playback and another for visualization of music. It’s not much, but I’m hoping it’s enough that someone else can use it. I don’t have a ton of time to play with it so I just tried to cover the essentials.