Audio Visualizers: Spectrogram, Spectrum, Vectorscope
Tutorial | Oct 07, 2024
In this video, I showcase a small touchscreen I bought for $120 and discuss using it as an additional metering screen with custom web-based visualizers I developed. The visualizers, including a vectorscope and spectrum analyzer, are accessible for free through my website and are built using vanilla JavaScript, allowing for easy tweaking and customization. I also provide links to try them out and encourage viewers to share feedback and suggestions.
You can watch the Video on Youtube
- support me on Patreon
- Spectrum
- Vectorscope
- Spectrogram
More Infos:
Summary #
Maybe you don't watch the video, here are some important takeaways:
In this video, I share some exciting new developments and ideas I'm working on. Firstly, I recently purchased a small, affordable touchscreen monitor from Amazon for around $120. The screen looks great and allows for interactive use, which got me thinking about utilizing it as an additional metering screen. There are many existing applications for metering and visualizations, like 4x by Noisia and mini meters, but I thought about developing my own visualizers.
I had the unconventional idea to create these visualizers as web applications, allowing them to run directly in a browser. This means they can be accessed easily without the need to install any additional software. In the video, I introduce three web pages that I've been working on: vectorscope.polarity.me, spectrum.polarity.me, and an in-development spectrogram feature. The first two are currently available for free and without subscriptions. They are simple, lightweight web applications developed using vanilla JavaScript, without involving complex libraries like React.
The code for these applications is transparent and well-documented on GitHub, making it easy for others to fork, tweak, or suggest improvements. I've provided links to these GitHub repositories, along with links to download virtual audio devices necessary for audio input if your sound card doesn't support loopback natively.
In the demonstration, I show the vectorscope.polarity.me application. After navigating to the site, I hit "start analyzing," which prompts me to choose an audio input. I'm using my sound card's loopback device that captures all outgoing sound. Once this is set, the visualizer illustrates whether the audio is mono or stereo, with left and right channels displayed clearly. This tool is handy for quickly assessing the stereo width of an audio signal and can be positioned on a second screen.
Next, I introduce the spectrum.polarity.me tool, a spectral analyzer that operates similarly. It offers various customization options such as color changes, and, like the vectorscope, it's accessible directly from a web browser without installation.
Lastly, I tease the upcoming spectrogram feature that's in development. Although not yet available online, it's running locally with some preliminary features like color themes and adjustable FFT sizes. I have several ideas in progress for this tool, and while it needs further development time, I wanted to share the concept with viewers.
Overall, these web applications aim to provide accessible and lightweight visualization tools for audio analysis. I encourage viewers to try them out, share their thoughts, report any issues, and suggest features or improvements. For further engagement, I'm open to comments and questions, and I appreciate likes and subscriptions to support the channel. Thanks for watching, and I look forward to sharing more in the next video.
Transcription #
This is what im talking about in this video. The text is transcribed by AI, so it might not be perfect. If you find any mistakes, please let me know.
You can also click on the timestamps to jump to the right part of the video, which should be helpful.
[00:00:00] Hey folks, welcome back to another video and I want to show you some new things.
[00:00:05] So first up, I bought a small little screen here of Amazon for around 120 bucks.
[00:00:11] It wasn't expensive, it looks great and it's also a touchscreen, right?
[00:00:17] So I can interact here with some stuff.
[00:00:21] And then my idea was maybe I can use this screen as a metering, additional metering screen.
[00:00:28] And there are a lot of different applications on the market for metering or for visualizations.
[00:00:34] Let's say I use 4x by Noisia and I use mini meters and so on.
[00:00:40] But then I came up with the idea, maybe you can develop your own kind of visualizers, right?
[00:00:47] And I had this strange idea to do this actually inside of the browser.
[00:00:52] So these are just web applications.
[00:00:55] So this is a web page, this is a web page and this is a web page.
[00:00:59] And these two here are currently available.
[00:01:03] This one here, you go to vectorscope.polarity.me and this one is spectrum.polarity.me.
[00:01:13] And I put the link in the description below.
[00:01:15] So this one here is a spectrogram and it's currently in development.
[00:01:21] I need a bit of time, I want to implement some features here, I have some ideas.
[00:01:25] So this is not available at the moment.
[00:01:29] It's only locally here running on my PC.
[00:01:32] But these two are at the moment publicly available on my web page.
[00:01:39] And they are completely free.
[00:01:40] You don't need to pay anything.
[00:01:42] There's no subscription or anything.
[00:01:44] It's just a very simple, straightforward web application with vanilla JS.
[00:01:51] There's no React or any big library involved.
[00:01:54] It's very straightforward and slim and lightweight.
[00:01:59] The code is also very easy to read and there's a lot of documentation inside of these files on GitHub.
[00:02:06] So you can fork it for yourself if you want to and you can tweak it.
[00:02:11] You can add some features if you want to.
[00:02:13] There's also here on the bottom, there are awesome links here to GitHub and to all the other tools.
[00:02:22] And yeah, I want to show you how this works here in this video.
[00:02:26] So like I said, this one is probably available next week or the end of this week.
[00:02:30] I need to need a bit of time to implement some features, some ideas.
[00:02:34] This one is available and this one is also currently available.
[00:02:39] So I want to show you this on my main screen, how this works.
[00:02:44] Maybe we stop this here for a moment and I bring up here the vector scope, this one here.
[00:02:52] Um, let's bring this down.
[00:02:54] You can see here the URL is actually very easy.
[00:03:00] It's just vectorscope.polarity.me.
[00:03:03] So nothing specially.
[00:03:05] Go to this website and then it looks like this.
[00:03:09] And then all you have to do, maybe I disable this here for a moment.
[00:03:14] All you have to do is just hit start analyzing.
[00:03:17] Then the website asks you for an input, an audio input.
[00:03:23] And here I'm just choosing my loop back device, which is everything that's, that goes out of my
[00:03:31] sound card is actually going into this input device.
[00:03:35] It's just a feature of my sound card.
[00:03:37] But most sound cards are most, um, yeah, most sound cards have this, uh, already in there.
[00:03:44] If you don't have it, maybe you can work with an external loop back cable.
[00:03:49] So you have to go out of your, um, sound card and then back into your sound card or a different
[00:03:55] sound card and then record it.
[00:03:57] Or maybe you use some kind of, um, um, virtual audio devices.
[00:04:03] There are a lot of things.
[00:04:04] I maybe put also a link in the scripture below so you can download this.
[00:04:08] There are free devices that do this for you.
[00:04:10] So here I just use the loop back device so I can record in this web application here,
[00:04:16] everything that goes out of my sound card.
[00:04:19] Just say allow it here.
[00:04:21] And then this goes black.
[00:04:23] And then maybe I put this here into, uh, always on top mode.
[00:04:28] Let's see.
[00:04:30] It's always on top.
[00:04:33] And then I can go here into Bitwig.
[00:04:36] Maybe I increase the input gain.
[00:04:43] And yeah, this is the left side here.
[00:04:57] This is the right side of the, uh, panorama.
[00:05:00] So, um, if I bring this down.
[00:05:03] So this is mono, right?
[00:05:06] This is a mono signal when you have a straight line in the middle.
[00:05:11] This is the left side, right side.
[00:05:14] So it's not only it looks nice as a visual, but you can also see if you have, um,
[00:05:27] yeah, a monophonic signal or you have a very wide signal.
[00:05:33] For instance, right?
[00:05:34] You can back here, you to mono and then we use this here to the left side.
[00:05:41] it's a different frequency than the right side.
[00:05:44] Looks like this.
[00:05:47] So it looks nice.
[00:06:00] So it looks nice.
[00:06:14] You can maybe record this or just have it on your second screen.
[00:06:18] So you can immediately see if something is mono or it's stereo or how wide it is.
[00:06:24] But this vector scope, you can also see the left channel, the right channel, mid and side.
[00:06:29] If there is some information there, see, this is very wide.
[00:06:34] There's no side information.
[00:06:37] So it's a monophonic signal, but this is how this, uh, scope works.
[00:06:41] And I did this here.
[00:06:42] The reason two days coded this.
[00:06:45] And, um, yeah, you just go to vector scope.polarity.me and you can use it.
[00:06:50] There's also here, uh, link to the GitHub page.
[00:06:52] Um, so like I said here, this is pretty straightforward.
[00:07:01] Um, there are multiple files.
[00:07:02] There's documentation in there.
[00:07:04] There's no library is used here.
[00:07:07] It's all vanilla JS.
[00:07:08] So if you can code vanilla or if you can code JavaScript, um, you probably have no problems
[00:07:15] to tweak this to your liking.
[00:07:17] Um, you can also find out some issues if you have bugs or if you have some ideas for features,
[00:07:24] just let me know.
[00:07:26] Um, so this is this one.
[00:07:28] And then there's a different one here.
[00:07:31] Let's go to, uh, spectral analyzer.
[00:07:35] It's also here on GitHub, right?
[00:07:37] And try out a demo.
[00:07:38] Brings you back to spectrum.polarity.me.
[00:07:42] Do the same thing here.
[00:07:44] You start.
[00:07:45] Select the loopback device.
[00:08:05] Um, there also are some options, um, can change the colors and so on.
[00:08:10] So a lot of different features and ideas I had.
[00:08:12] Yeah.
[00:08:13] Like I said, everything is kind of work in progress.
[00:08:15] Um, there are probably some changes in the future, but you can try it out, uh, for yourself
[00:08:21] in the browser.
[00:08:22] You don't need to install anything.
[00:08:23] You just go to the webpage and then you have it.
[00:08:25] Um, then there's here my, what's this here?
[00:08:34] This is here my spectrogram, and this is running locally here.
[00:08:38] It's the combination.
[00:08:48] Um, it needs a bit of time.
[00:09:04] I have some features already here implemented.
[00:09:06] Um, we have different color themes here.
[00:09:08] FFT size that change.
[00:09:12] Um, um, yeah.
[00:09:14] Like I said, it takes a bit of time.
[00:09:17] I have some ideas for this.
[00:09:18] Um, it's in development.
[00:09:20] It's coming soon.
[00:09:21] I want to show you this actually just in this video.
[00:09:23] Uh, maybe you are interested in this, um, links are in the description below.
[00:09:29] Let me know what you think.
[00:09:30] If you have some questions also in the comments, let me know.
[00:09:32] Um, and if a like, if a subscription, thanks for watching.
[00:09:37] I'll see you next video.
[00:09:38] Bye.