Tags: posts polarity-music Software Tutorial Visuals

Audio Visualizer: Spectrogram

Tutorial | Nov 11, 2024

In this video, I introduced my free-to-use online audio visualizers, including a newly updated spectrogram that works without any subscription or login. I demonstrated how to use it to analyze music, tweak various settings, and export MIDI files, all while mentioning ongoing improvements and welcoming feedback. Thanks to my Patreon supporters, I can offer these tools for free, and I invite viewers to try them out and contribute through GitHub if interested.

You can watch the Video on Youtube

More Infos:

Summary

Maybe you don't watch the video, here are some important takeaways:

Hey everyone, welcome back to the channel! A few weeks ago, I shared three audio visualizers I developed: a spectrogram, a spectrum analyzer, and a vectorscope. In that video, I showed how I use these tools on my desk's small screen without needing a login, subscription, or even paying anything. All you need is a browser to access the URL and utilize these visualizers for free.

I coded these applications from scratch without any library or framework, and I've made the code available on my GitHub. You're welcome to fork it, tweak it, or make any changes you want since it's completely free. In the previous video, I demonstrated the vectorscope and spectrum analyzer, but I hadn't finished the spectrogram at that time as it needed some more work. Today, I am excited to show you the finished spectrogram visualizer.

This tool is now available on my blog page via a simple URL: spectrogram.polarity.me. It’s very straightforward to access; just open it in any browser. Once you reach the webpage, hit the start button, and the browser will prompt you to allow the audio engine to work. I use my loopback device to capture all the audio on my PC, including sounds from various applications. After allowing access, the visualizer will begin showing the audio spectrum.

To demonstrate, I played some music in the background. The spectrogram started to draw all the spectrum information. There are several controls you can utilize to tweak the visualizer settings. For instance, you can change the FFT size from the default 2048 to a higher number like 4000 for more information. You can adjust thresholds, contrast, and even change the color theme.

Moreover, you can pause the visualizer at any moment, and it will stop updating, allowing you to see the details clearly. You can hover over the spectrogram to identify specific notes like F#4 or D4. Just like in a previous application I demonstrated called Note Grabber, you can click and drag the notes within the spectrogram, highlighting them. You can export these highlighted notes as a MIDI file and use it in a DAW like Bitwig Studio.

While the spectrogram is functioning, I'm working on enhancing its clarity and improving its representation of harmonic content. I plan to introduce a tonal persistence slider to filter noise, focusing on persistent, tonal frequencies. Additionally, I'm exploring the implementation of the reassignment method, a technique to enhance resolution at low FFT sizes by analyzing phase information for accurate frequency detection. Though it's still a work in progress, I'm eager to offer early access so you can try it on your desktop or smartphone.

All relevant URLs are provided in the comments, along with links to my previous blog post and video. Please test it out and provide feedback. Remember to like the video, subscribe to the channel, and consider supporting me on Patreon too. I'm open to feature requests and contributions from anyone interested in enhancing this project via GitHub. This project is free from ads, cookies, subscriptions, tracking, and is a pure JavaScript application, making it fast and accessible to everyone.

I’m grateful to my Patreon supporters who make it possible for me to dedicate time to develop projects like this. Thank you for watching. Don't forget to leave a comment, subscribe, and I'll see you in the next video. Bye!

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. A few weeks ago I showed you on my channel my three audio visualizers,
[00:00:05] a spectrogram, a spectrum analyzer and a vector scope. And I made a video about this here. You
[00:00:10] can re-watch it if you want to because I also show you how I use this here on my small screen
[00:00:14] on my desk. And the special thing about this is that you don't need a login, you don't need a
[00:00:21] subscription, you don't need to pay money. All you need to do is basically a browser and go to this
[00:00:26] URL and then you can use these kind of visualizers completely for free. Okay. I also coded all these
[00:00:34] applications without using any library or framework or anything like that. So it's all available on my
[00:00:43] GitHub so you can fork it or tweak it or make some changes to it. It's completely free, right?
[00:00:48] So in this video I showed you here the vector scope and the spectrum analyzer and what's missing was
[00:00:55] here the spectrogram because I needed to work a bit on it. And today I want to show you exactly this
[00:01:03] visualizer how it looks like and how you can use it. So now this is available here on this blog page
[00:01:10] or blog post. You can click on it or you can just use the URL here at the top. You can see
[00:01:15] spectrogram.polarity.me. It's very simple. You can open it up in any browser like I said. So when you
[00:01:23] are on this web page here all you need to do is to hit this start button down here and then the browser
[00:01:30] asks you to allow to use the audio engine. So here I'm using my loopback device because it records
[00:01:38] all the stuff happening on my PC, right? Everything that comes from any application, also the ASIO on
[00:01:46] on Windows. So I just use this, allow it and then it starts to record here or to show you the visuals.
[00:01:53] So now in the background here I start some kind of music.
[00:02:02] And you can see here it draws all the spectrum information to this graph. And what we can do
[00:02:09] now is we can open up here the controls and then tweak a bit. We can for instance change the FFT size
[00:02:15] because at the moment it's just 2048 here and I go to 4000 maybe. So you get more information here.
[00:02:23] You can also tweak here some thresholds, what kind of pins you want to let pass or want to show.
[00:02:33] You can change the contrast here. You can change the color theming if you want to change that or use a custom
[00:02:41] theme. Go back to heatmap here. Maybe choose something different here.
[00:02:56] Maybe stop here. So now we can hit this pause button here. Right. And it says resume here, but we can also see now this sticks in place or it's not going to fit in place.
[00:03:16] So we can hit this pause button here, right? And it says resume here, but we can also see now this sticks in place or it's not going to fit in place or it's not going to fit in place.
[00:03:26] Or it's paused. So what we can do now is we can hover over this spectrogram here and you can see we, uh, this is here, the node F#4, this is D4, right?
[00:03:37] So what we can do now is we can do the same thing as in the application I showed you also a few videos ago called node grabber.
[00:03:45] We can just click and drag here the nodes into this spectrogram.
[00:03:50] Highlight some stuff here.
[00:03:55] Uh, something like this.
[00:04:00] And then get some of these nodes out, right? You can see it's D4, F4, F#4 and so on, but you can also then hit export and then we download here a midi file.
[00:04:14] And you can then use this inside of Bitwig Studio here if you want to.
[00:04:20] let me guess here download, let me guess here download, we download this or just move this in.
[00:04:24] You can see we have all the nodes here inside of a node clip so you can use this also not only to show
[00:04:33] what's going on inside of your frequency spectrum. We can also try and use this to analyze some harmonies in there
[00:04:42] and extract notes from polyphonic audio.
[00:04:46] And what I want to do in the future is it needs some tweaking here.
[00:04:50] It's not the perfect visualizer at the moment.
[00:04:54] You can see all the frequencies in the right place that's kind of working but I'm working on making this more clear, more visible what's going on harmonically.
[00:05:07] So I'm introduced here a tonal persistence kind of slider that tries to filter out all the noise, right?
[00:05:16] We only want to have persistent frequencies, tonal information.
[00:05:20] So I tried to do this with this here, but it's not really working correctly.
[00:05:26] And then I'm also trying to implement here the reassignment method.
[00:05:30] That's kind of a method someone talked in in the video about spectrum analyzers or
[00:05:38] spectrograms that they are not really high resolution in low with low FFT size.
[00:05:46] So I'm trying to go here for low FFT sizes and then use this reassignment method here, which tries to analyze some phase information to find
[00:05:57] you have to find the right frequencies, even though you have just a low FFT size.
[00:06:04] So this should make things then much, much clearer in terms of what's going on harmonically inside of the spectrogram.
[00:06:11] But it's still work in progress here.
[00:06:13] But I want to give you actually here an early access to this spectrogram so you can use it also on your
[00:06:19] smartphone, not only on your browser because the smartphone has also a browser and it works
[00:06:24] fairly well on the iPhone for me at least.
[00:06:27] So yeah, the URL is down in the comments.
[00:06:33] Also here my blog post from early on, also the video I showed you a few weeks ago.
[00:06:42] So please try this out.
[00:06:43] Give me some feedback.
[00:06:44] Like the video.
[00:06:46] Subscribe to the channel.
[00:06:48] Go to Patreon.
[00:06:49] Whatever you want to do.
[00:06:50] Let me know.
[00:06:52] I also open for feature requests.
[00:06:55] If you want to have something in there, I try to bring it in or maybe there are some
[00:07:00] people who want to put some time into these GitHub repos and code stuff in for themselves.
[00:07:09] I don't know.
[00:07:10] So do some pull requests on GitHub if you want to.
[00:07:12] I'm open for everything.
[00:07:15] This is just a fun project and I want to do this here.
[00:07:18] And I think it's actually great to have something in the browser that's completely free.
[00:07:22] No, it's right.
[00:07:23] No cookies.
[00:07:25] No subscription.
[00:07:26] No login.
[00:07:27] No tracking.
[00:07:29] Nothing.
[00:07:30] Just pure JavaScript application.
[00:07:32] No libraries.
[00:07:34] Fast loading.
[00:07:36] Free for everyone.
[00:07:37] Free until the end of time.
[00:07:40] Right.
[00:07:40] So that's how it should be in my opinion if you can afford it.
[00:07:46] Of course, I can afford it because I have a lot of Patreons.
[00:07:50] They support me and I'm really thankful for them subscribing on Patreon, making this possible
[00:07:56] that I can just, you know, take two, three, four days and just make stuff like this.
[00:08:02] It's very nice to have and I'm very, very grateful for that.
[00:08:10] So thanks for watching.
[00:08:11] Leave a like.
[00:08:12] Leave me a comment down below.
[00:08:13] Leave a subscription.
[00:08:14] See you in the next video.
[00:08:15] Thanks for watching and bye.