오디오 비주얼라이저 — 15가지 반응형 WebGL 장면

들어오는 소리를 32개 주파수 대역으로 나누어 1초에 약 90번씩 쉬지 않고 분석하며, 이는 화면의 프레임 속도와 상관없습니다. 각 대역은 그 대역 자체의 최근 큰 소리 순간과 배경 소음에 견주어 판단되므로, 조용한 마이크와 큰 소리의 파일이 화면을 똑같이 움직이고, 정적이나 방 안의 잡음은 장면을 차분하고 어둡게 둡니다. 킥(베이스 드럼), 스네어, 하이햇 같은 타격음은 따로 감지되고 박자도 추적되며, 음악이 멈추면 템포 고정이 바로 풀려 정적 속에서 맥동이 이어지지 않습니다. 장면들은 베이스를 크기와 큰 형태로, 고음을 불꽃과 세밀한 디테일로, 타격음을 폭발, 물결, 번개로 바꾸고, ‘파형’과 ‘스펙트럼’은 실제 스펙트럼을 그립니다.

먼저 브라우저에서 마이크 접근을 허용하세요. 조용할 때 화면이 차분한 것은 의도된 동작이니, 마이크 가까이에서 음악을 틀거나 파일을 선택하세요. 음악이 방 안의 잡음보다 아주 조금만 크다면 소리 나는 곳을 더 가까이 두거나, 볼륨을 높이거나, 민감도 슬라이더를 올리세요. 파일을 재생할 때 브라우저가 소리를 스스로 시작하지 않았다면 ▶를 누르세요.

예. S를 누르거나 스크린세이버 버튼을 클릭하세요. 비주얼라이저가 전체 화면에 진입하고 15가지 장면을 30초마다 하나씩 자동으로 순환합니다. Escape를 누르거나 아무 곳이나 클릭하여 종료합니다.

각 장면은 GPU 프래그먼트 셰이더라서 하드웨어 가속이 켜진 WebGL이 필요합니다. 검은 사각형은 장면이 고장 난 것이 아니라 브라우저 설정에서 가속이 꺼져 있다는 뜻인 경우가 대부분입니다. 끊김은 같은 이야기의 반대편입니다. 15개 장면 중 ‘전기 폭풍’과 ‘용암’이 가장 무겁고 ‘스펙트럼’과 ‘파형’이 가장 가벼우니, 가벼운 장면으로 바꾸거나, 시네마틱 포스트 이펙트를 끄거나(P), 전체 화면을 벗어나거나, 같은 GPU를 두고 경쟁하는 다른 탭을 닫으세요.

예. 파일 업로드 모드로 전환하고 오디오 파일(MP3, WAV, OGG, FLAC)을 선택하세요. 음악이 스피커를 통해 재생되며 비주얼은 실시간으로 반응합니다.

파일과 장면을 고른 뒤 ‘비디오 만들기’를 누르세요. 페이지가 노래 전체를 초당 30프레임으로 한 프레임씩 그린 다음, 화면과 노래의 소리를 합쳐 MP4 또는 WebM 비디오로 만듭니다. 화면 비율은 YouTube용 16:9, Reels·TikTok·Shorts용 9:16, 정사각형 1:1 중에서 고를 수 있습니다. 각 프레임은 바로 그 순간 울리는 소리로 계산되므로 번쩍임이 타격음에 정확히 맞아떨어지고, 그래픽 카드가 느리면 프레임이 빠지는 대신 비디오를 만드는 시간이 더 걸릴 뿐입니다. ● 버튼은 지금 화면에 보이는 모습을 녹화하는 기능으로, 마이크를 쓸 때를 위한 것입니다.