Graphic Equaliser/live visual representation of sound inputted into device

Thunkable Discuss
#1

Hi All,

I’m looking to make an app that includes a graphic equaliser display that works as sound is inputted into a device through the microphone. The only reason for the display would be assure the user that the sound was being inputted as they spoke.

Ideally it would be a waving line but it could be in the form of rows of coloured blocks (example images below). I would like to be able to change the colour of the bars but as long as it is a live representation of sound as it is inputed into the app, that’s the main thing.

848460390-640x640

graphic-equalizer-vector-403566
graphic-equalizer-vector-4035661000×783 135 KB

Any ideas?

#2

Hi,

check out the Web Audio API and wavesurfer-js.org

1 Like
#3

Hi Actech,

Thanks for the input and the link. To be honest, i was thinking something that worked more like the gif below (my fault, i should have been clearer) :slight_smile:

Audio Visualiser

Any help on this would be great :+1:

#4

Are you looking for something like this?

https://www.codeseek.co/preview/kkgObv

1 Like
#5

actech, your awesome! thanks very much. Just need to figure out how i’d get it into the app now. Admittedly I’m better at layout and design than i am at the blocks.

#6

You can connect in several ways:

  1. Import the html file into the project and display it in WebViewer or an external browser (using the “open link” block)
  2. Try to download it in the data URI format using the data: protocol. It looks something like this:

htmlinwebviewer

1 Like
#7

Super Awesome, Thanks very much matey I will have a go and let you know how i get on :v:

#8

Test project. I have it running on iOS 11.4

https://x.thunkable.com/projects/5b5f50279fd789d8928fdf1e/project/properties/designer/

audioindicator1.txt (7.0 KB)

2 Likes
#9

Thanks Alexander,

If there was an award for the most helpful member of the forum, I would nominate you for it pal!

Brilliant, thanks very much for your help.

:trophy:

#10

OMG this is awesome! :heart_eyes:
Thanks!!!

#11

However, the indicators items I could reproduce them on iOS but it doesn´t work on Android even though on your example app they do work on Android. I don´t know if you have any ideas of what it might be happening or if you want to take a look.
Thanks

#12

If you give me a link to your project, I will look at them on Android.

#13

I sent you a link via DM, thanks