작성계기

퇴근 후 간만에 사운드클라우드에서 음악을 듣다가 킥 소리가 강조된 음악을 발견했고, 파형으로 보면 좋겠다는 필요성을 느낀 김에 여러 과정을 거쳐서 컴퓨터에서 재생되는 소리를 받아서 시각화해 주는 html 파일을 만들었다. 개인적으로도 만족하고, 생각보다 범용성 높게 잘 뽑혀 나온 것 같아서 간단하게 최종 버전 공유와 함께 만든 과정을 기록해 볼까 한다.

최종 버전

링크(Github gist 공개링크)

다음 링크에 들어가서 파일명 html로 된 부분을 우클릭해서 다른이름으로 저장하거나 오른쪽 위의 download zip을 누르거나 아니면 코드를 직접 긁어서 파일로 저장하거나 해서 로컬에 저장하면 된다.

https://gist.github.com/ProjectEli/5ac7abb6e0941b69f0b83f35867d47d4

사용법

로컬에 다운받은 파일을 열면 웹 브라우저로 켜질 것이다. 다음과 같은 화면이 보인다.

이것을 누르면 팝업이 하나 더 뜨는데, 다음과 같이 전체 화면 탭에서 전체 화면을 고르고, 시스템 오디오도 공유를 켜준 후 공유를 누르면 바로 비주얼라이저가 표시된다.

표시된 비주얼라이저는 웹 브라우저 창 크기를 조절하면 원하는 크기로 조절된다. 필자는 높이를 많이 줄여서 다음과 유사한 비율로 사용 중이다.

간단하게 설명하면, 가로축은 50Hz ~ 1000Hz의 주파수이다. 세로축은 오디오 파형을 dB값으로 -20 ~ -50dB 영역으로 잘라서 표기한 것이다. 거의 실시간으로 반응하며, 100Hz 미만의 킥 부분이 잘 보여서 쫀쫀한 킥이 있는 음악을 들어보면 효과를 확인할 수 있다.

참고적으로 화면 맨 아래 가운데에 다음과 같이 오디오 공유 중임을 알리는 웹 브라우저 창이 하나 더 뜬다. 오른쪽의 숨기기 버튼을 누르면 최소화되며, 작업 표시줄에서 창 이름을 눌러서 다시 표시할 수 있다.

혹시나 무슨 음악을 들어야 확인할 수 있을 지 모르겠다면 필자의 사운드클라우드 like 목록에서 대충 아무거나 재생해보거나 Skrillex, Fred again.. & Flowdan – Rumble같은 음악을 들어보면 된다.

문제해결

재생기기 변경 등으로 파형이 나오다 끊길 때

웹 브라우저의 새로 고침 버튼을 눌러 주면 간단하게 다시 연결이 가능하다.

소리보다 파형이 딜레이가 길어서 줄이고 싶을 때

딜레이가 생기는 이유는 연산에 필요한 소리 포인트 수를 모으는 데 시간이 걸려서이다. 컴퓨터 성능이 더 좋다고 빨라지는 것은 아니고 수학적으로 어쩔 수 없이 발생하는 지연이라는 점 감안해야 한다. 해결 방법은 다음과 같다.

html파일을 vscode나 메모장 등의 편집기로 열면 line 28에 const FFT_SIZE = 4096; 이라고 된 부분이 있다. 숫자를 2048, 512 등으로 줄여 주면 된다. 참고적으로 4096개로 FFT했을 때 시간 지연은 48000Hz 재생하는 컴퓨터 기준 4096/48000Hz = 85.3ms 정도이다.

FFT size를 줄이게 되면 시간 지연을 줄일 수 있다. 참고로 2의 배수로 줄이거나 늘려야 원리적으로 문제가 덜 발생한다. 그런데 너무 많이 줄이게 되면 후술할 만든 과정 부분에 언급된 것처럼, 포인트 하나가 차지하는 주파수 영역이 커져서 파형이 뭉개져 보인다는 단점이 있다. 물론 지연시간을 줄이는 다른 방법으로 컴퓨터에서 재생되는 소리를 48000Hz보다 훨씬 빠르게 만들어 주는 방법도 있겠지만, 이러면 2026년 기준 대부분 음악과 맞지 않아서 강제로 고Hz로 변환하면서 원음이 왜곡되거나 연산 자원을 퍼먹거나 하는 문제가 발생할 수 있으므로 권장하지 않는다.

그나마 FFT size를 줄였을 때 뭉개져 보이는 것을 방지하기 위해서 공개된 코드에는 선형보간(linear interpolation)을 박아 놓았다. Spline으로 하면 연산량이 올라가므로 그냥 선형보간으로 타협을 봤다.

만든 과정

가장 처음 만들어야겠다고 생각한 계기는 符色 & Nyacktas – Follow 라는 음악을 듣고 나서이다. 초반부의 앵앵거리는 보컬소리를 지나면 나오는 댐핑감이 있는 킥 소리를 듣자마자 아 이건 비주얼라이저로 보고 싶다는 생각이 들었다. 이전에도 Rainmeter + 플러그인 조합으로 해결했던 적이 있었는데 충돌나서 계속 꺼지는 문제가 있어 한동안 잊고 살았었는데, 이번 기회에 다시 도전해 보기로 했다.

2026년은 이미 LLM의 시대이기 때문에 Gemini에 쿼리를 넣었고, CPU를 사용하는 레인미터보다는 훨씬 안정적이라고 추천해 주는 GPU연산 기반의 월페이퍼 엔진을 유료로 깔은 후 3rd party로 audio visualizer 만든 사람들꺼를 갖다 써봤다. 시각적으로 아름답고 충돌이나 렉걸린다든지 하는 버그는 없었지만 전체 스펙트럼을 겨우 수십 개의 바로 표시하다 보니 킥 부분에 할당된 바가 2~3개정도 뿐이라 쫀쫀한 킥의 주파수가 퍼져 있다가 쫙 모이는 것이 눈에 잘 보이지 않았다. 평소에 많이 듣는 음악이 kick과 sub bass를 많이 쓰는 것들이다보니 주파수 낮은 영역대가 강조된 것을 원했는데 많이 아쉬웠다.

이전에 오디오 관련해서 코드를 짜서 시각화하는 비스무리한 짓 (음악을 사운드클라우드 파형으로 표시하기, 2022) 을 해 보기도 했어서 Wallpaper engine에 적용할 수 있는 시각화 레이어를 직접 만들어보기로 했다. 그런데 좀 검색해보니 Wallpaper engine이 제공하는 오디오 파형 API가 성능 문제로 128개의 밴드밖에 지원하지 않는다는 것을 발견하였다. 겨우 128개, 그것도 주파수 영역 지정이 불가능한 전체 영역을 받아오게 되면 단순히 생각해봐도 20kHz/128 = 156.25Hz, 즉 bar 한 개당 100Hz 이상이 되므로 킥의 피크 주파수 변화같은 것들은 보일 수가 없다. 월페이퍼 엔진을 이용하는 방법은 빠르게 포기.

다음으로 생각할 수 있는게 무료 대안인 Lively wallpaper였는데, 이것을 깔고 이것저것 건드려보니 Rainmeter때와 마찬가지로 뭐 조금만 했다 하면 굳어버려서 쓸 수가 없었다. 결국 다시 Gemini에 쿼리를 했더니 html로 사용할 수 있는 코드를 뱉어냈다. 파일로 저장 후 써봤더니 꽤 잘 되는 것을 확인하였다. 처음 나온 코드가 마이크를 인식해서 파형으로 바꿔주는 방식이라 이전에 완성했던 소리 라우팅 (게임소리와 음악소리를 동시에 디코로 송출하기, 2024)의 Voice Meeter를 이용하여 마이크로 라우팅해 주었다.

세팅이 조금 번거롭기는 했지만 다운받았던 음악의 소리를 로컬에서 vlc로 재생했을 때 잘 표시되는 것을 확인했다. 문제는 정작 유튜브나 사운드클라우드 등 웹에서 나오는 소리가 이 방식으로는 표시되지 않는다는 것이었다. 몇 가지 삽질을 하다가 알아낸 게 웹 브라우저의 데스크톱 공유 api를 이용하면 해결할 수 있다는 것을 깨닫고 간단하게 unit module로 만들어서 테스트해보았다. 다행히 잘 되는 것을 확인했고, Gemini한테 합쳐 달라고 했더니 앞에서 공유한 최종 파일을 얻을 수 있었다.

만들고 나서 든 생각

5500원을 주고 산 Wallpaper engine에 적용할 수 없다는 점은 아쉽긴 했지만, 그래도 별도의 오디오 라우팅 없이 데탑 소리를 인식해서 작동하는 오디오 비주얼라이저를 만들었다는 점은 만족스러웠다. 특이점 이후의 시대인 2020년대이기 때문에 vibe coding이 유효하다는 것을 다시 한번 확인했다.

그리고 혹시나 커스텀을 원하는 사람이 있을지는 모르겠지만, html 파일을 열면 다양한 옵션들이 있으니 옵션값 바꾸고 웹브라우저에서 새로고침을 누르면 된다. 참고로 코드 라이선스는 MIT로 공개한다.

어쨌거나, 몇 시간만에 뚝딱 만든거치고 잘 작동해서 서브 모니터에 띄워 놓고 앞으로 자주 사용하게 될 것 같다. 사용법도 쉬우니 필요한 사람들이 많이 가져가서 쓴다면 더 보람을 느낄 듯하다. 나중에 Wallpaper engine에서 built in으로 지원해주면 더 좋을 것 같다. 끝.