Simple Visualizer

[v864]

I wanted a graphic equalizer display widget so I whipped one up with AI! Hudiy made this super easy and I'm very impressed.

Here's the widget definition from dashboards.json:

Code: Select all

                {
                    "type": "web_static",
                    "size": "small_narrow",
                    "url" : "file:///home/car/hudiy-repo/viz/viz.html"
                }

Here's the source for the single HTML file: https://gist.github.com/DrewMikola/b4d1 ... c4ca68650d

Just copy that onto your Pi, adjust the paths as neccesary, and you're good to go. If you want something fancier just dump it into the AI tool of your choice (I used Grok for this) and have at it.

Cheers!

Image: https://pasteboard.co/Qaeqzo9EeBGI.png

[k.s.deviate]

Would you be willing to write a tutorial for this?

[k.s.deviate]

Piggybacking off the simple Visualizer post - viewtopic.php?t=86

Is there a way to capture the audio that Hudiy is outputting after the eq, to use with this visualizer html instead of using the microphone? A loopback or using a monitor? Running pw-cli ls Node, in my case only 2 options show available for input, Echo-Cancel Source and the Unitek usb sound card.

Or would this need to be accomplished as a standalone python app?

Along the standalone app route, is it, or can it be possible to minimize Hudiy to the desktop tray and in theory keep AA alive and playing audio? Along the same vein as using the ^ in a window to minimize.

[hudiy]

In PipeWire, every sink has its own monitor, which is visible in pactl list sources. You can redirect any monitor (e.g. hudiy_equalizer_sink.monitor) to your virtual source and then use that source in your visualizer, for example:

Code: Select all

pactl load-module module-remap-source master=hudiy_equalizer_sink.monitor source_name=visualizer_source source_properties=device.description="Visualizer"

and then in HTML/JavaScript:

Code: Select all

let stream = await navigator.mediaDevices.getUserMedia({ audio: true }); // It is required for granting microphone permission in chromium
const devices = await navigator.mediaDevices.enumerateDevices();
const virtualMic = devices.find(device =>
    device.kind === 'audioinput' &&
    device.label.includes("Visualizer")
);
stream.getTracks().forEach(track => track.stop());
stream = await navigator.mediaDevices.getUserMedia({
    audio: {
        deviceId: { exact: virtualMic.deviceId },
    }
});