오디오 시각화 도구이란?
파형, 주파수 막대, 원형 스펙트럼, 스크롤 스펙트로그램으로 오디오를 실시간으로 확인하세요. 각 디스플레이는 재생 중인 음악에 반응합니다.
이 시각화 도구는 파일이나 마이크에서 오디오를 받아 Web Audio AnalyserNode로 분석한 뒤, 주파수 또는 시간 영역 데이터를 60fps로 캔버스에 그려요. 파형, 주파수 바, 미러 바, 원형 스펙트럼, 스크롤 스펙트로그램 중에서 고르고, 캔버스를 와이드·정사각형·세로로 맞춰 어떤 플랫폼에도 대응하고, 배경색은 프리셋이나 사용자 색상으로 정하고, 컬러 스킴을 오렌지·네온·오션·모노크롬·레인보우로 바꾸고, 감도와 바 개수를 조절하세요. PNG로 한 장면을 저장하거나, 동영상 버튼으로 오디오가 합쳐진 WebM 클립을 내보낼 수 있어요.
사용 방법
- 오디오 파일을 업로드하거나 마이크 입력을 사용하세요
- 시각화 스타일 선택 — 파형, 주파수 바, 미러 바, 원형 스펙트럼, 스크롤 스펙트로그램
- 오디오를 재생하며 시각화가 실시간으로 반응하는 모습을 감상하세요
사용 시기
- 곡의 가장 큰 순간에서 막대 스펙트럼을 캡처해 싱글 커버 아트로 활용할 때.
- SNS 게시물이나 유튜브 업로드용으로 시각화가 싱크된 트랙의 WebM 클립을 녹화하기.
- 사운드 디자인 수강생에게 EQ 조정이 곡의 스펙트럼 모양을 어떻게 바꾸는지 보여줄 때.
결과
스트리머가 음악 스트림에 라이브 오디오 시각화를 추가하여 비트에 맞춰 맥박 치는 화려한 주파수 막대를 보여줍니다.
자주 묻는 질문
- 막대와 파형의 그라데이션 색은 어떻게 결정되나요?
- 각 스킴은 주파수나 진폭 값을 색상 램프에 매핑합니다. 레인보우는 HSL 전 색상, 네온은 채도 높은 핑크와 시안, 오션은 푸른 계열, 모노크롬은 그레이스케일, 오렌지는 사이트 팔레트에 맞춰져 있습니다.
- 마이크를 켤 때마다 권한을 물어보는 이유는 무엇인가요?
- 브라우저는 사용자가 명시적으로 허용하기 전까지 마이크 접근을 막습니다. 한 세션에서 한 번 허용하면 보통 유지되며, 이전에 거부했다면 브라우저 설정에서 이 사이트의 마이크 권한을 지운 뒤 새로고침해야 합니다.
- 단일 프레임이 아니라 시각화 전체를 영상으로 녹화하려면 어떻게 하나요?
- 캔버스 위 동영상 아이콘을 누르면 라이브 시각화를 오디오와 함께 WebM으로 녹화할 수 있어요. 파일은 처음부터 전체 트랙을 캡처하고, 마이크는 30초짜리 클립으로 녹화돼요. 옆에 있는 PNG 버튼은 정지된 한 장면만 저장하니까 스틸 이미지가 필요할 때 쓰세요.
- 감도 슬라이더는 실제로 어떤 동작을 하나요?
- 그리기 전 단계에서 진폭을 스케일링합니다. 값을 낮추면 음압이 큰 마스터에서도 막대가 화면을 벗어나지 않고, 값을 높이면 속삭임이나 깨끗하게 친 어쿠스틱 핑거링 같은 작은 소스를 부풀려 보여줍니다.
- 순음을 재생하면 막대가 몇 개만 보이는 이유는 무엇인가요?
- 순수 사인파에는 기본 주파수와 약간의 배음만 있어 FFT 빈 대부분이 0에 가깝습니다. 스펙트럼이 정상 동작 중인 것입니다. 음악이나 음성을 틀면 전 대역이 켜지는 모습이 나타납니다.