# Graphic Equaliser/live visual representation of sound inputted into device **URL:** \ **Category:** Questions about Thunkable X\ **Created:** [July 29, 2018, 10:42am UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135 "2018-07-29T10:42:57Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![FamousMrThomas](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/famousmrthomas/32/156887_2.png) [@FamousMrThomas](https://community.thunkable.com/u/FamousMrThomas)\ **Post date:** [July 29, 2018, 10:42am UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/1 "2018-07-29T10:42:57Z")
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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/7/57976738ac77b1afeb2591df97caf94b2bc6a303.jpg) ![graphic-equalizer-vector-403566](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/3/a3d0afad954cfecd5ba19c7b356ef0b63749d767.jpg) Any ideas? ---
**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\ **Post date:** [July 29, 2018, 5:38pm UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/2 "2018-07-29T17:38:51Z")
Hi, check out the Web Audio API and [wavesurfer-js.org](http://wavesurfer-js.org) ---
**Author:** ![FamousMrThomas](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/famousmrthomas/32/156887_2.png) [@FamousMrThomas](https://community.thunkable.com/u/FamousMrThomas)\ **Post date:** [July 29, 2018, 8:38pm UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/3 "2018-07-29T20:38:25Z")
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) 🙂 [Audio Visualiser](https://i.gifer.com/Ds5Z.gif) Any help on this would be great 👍 ---
**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\ **Post date:** [July 30, 2018, 7:57am UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/4 "2018-07-30T07:57:12Z")
Are you looking for something like this? [https://www.codeseek.co/preview/kkgObv](https://www.codeseek.co/preview/kkgObv) ---
**Author:** ![FamousMrThomas](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/famousmrthomas/32/156887_2.png) [@FamousMrThomas](https://community.thunkable.com/u/FamousMrThomas)\ **Post date:** [July 31, 2018, 1:46pm UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/5 "2018-07-31T13:46:37Z")
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. ---
**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\ **Post date:** [July 31, 2018, 2:04pm UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/6 "2018-07-31T14:04:35Z")
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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/5/a53e165cea418547b540129dd9b7e30faee5e9dd.png) ---
**Author:** ![FamousMrThomas](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/famousmrthomas/32/156887_2.png) [@FamousMrThomas](https://community.thunkable.com/u/FamousMrThomas)\ **Post date:** [July 31, 2018, 3:02pm UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/7 "2018-07-31T15:02:15Z")
Super Awesome, Thanks very much matey I will have a go and let you know how i get on ✌ ---
**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\ **Post date:** [July 31, 2018, 6:55pm UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/8 "2018-07-31T18:55:38Z")
Test project. I have it running on iOS 11.4 [https://x.thunkable.com/projects/5b5f50279fd789d8928fdf1e/project/properties/designer/](https://x.thunkable.com/projects/5b5f50279fd789d8928fdf1e/project/properties/designer/) [audioindicator1.txt](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/3/9351d1159de106e36cfce56382828b4dd088d243.txt) (7.0 KB) ---
**Author:** ![FamousMrThomas](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/famousmrthomas/32/156887_2.png) [@FamousMrThomas](https://community.thunkable.com/u/FamousMrThomas)\ **Post date:** [August 1, 2018, 4:34am UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/9 "2018-08-01T04:34:37Z")
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. 🏆 ---
**Author:** ![rojored12](https://avatars.discourse-cdn.com/v4/letter/r/47e85d/32.png) [@rojored12](https://community.thunkable.com/u/rojored12)\ **Post date:** [November 29, 2018, 8:48pm UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/10 "2018-11-29T20:48:25Z")
OMG this is awesome! 😍 Thanks!!! ---
**Author:** ![rojored12](https://avatars.discourse-cdn.com/v4/letter/r/47e85d/32.png) [@rojored12](https://community.thunkable.com/u/rojored12)\ **Post date:** [November 29, 2018, 11:11pm UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/11 "2018-11-29T23:11:35Z")
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 ---
**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\ **Post date:** [November 30, 2018, 7:38am UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/12 "2018-11-30T07:38:27Z")
If you give me a link to your project, I will look at them on Android. ---
**Author:** ![rojored12](https://avatars.discourse-cdn.com/v4/letter/r/47e85d/32.png) [@rojored12](https://community.thunkable.com/u/rojored12)\ **Post date:** [November 30, 2018, 8:11pm UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/13 "2018-11-30T20:11:47Z")
I sent you a link via DM, thanks ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 11:52am UTC](https://community.thunkable.com/t/graphic-equaliser-live-visual-representation-of-sound-inputted-into-device/38135/14 "2024-11-08T11:52:31Z")