오디오 스펙트럼Audio Spectrum Visualizer

Audio Spectrum Visualizer

오디오 스펙트럼

다른 이름Also known as · Audio spectrum visualizer · Audio Spectrum Bars · 오디오 스펙트럼 바 · Audio Spectrum · Spectrum Ribbon and Waveform · 스펙트럼 리본과 파형

247

렌더 추가 예정CLIP COMING오디오 스펙트럼Audio Spectrum Visualizer정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 247. 오디오 스펙트럼 · Audio Spectrum Visualizer · none

주파수 대역의 막대 또는 방사선 길이가 소리 세기에 따라 변화한다.Bars or radial lines change length using precomputed audio band samples.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

소리의 대역별 구성과 에너지를 보여준다.Shows the spectral composition and energy of sound.

언제 쓰나Use whenUSE WHEN

사전 추출한 16개 주파수 대역을 음악 시각과 맞춰 표시한다.
소리의 대역별 구성과 에너지를 보여준다. 기준값과 대상을 함께 표시할 때.

Visualize frequency-band energy in audio.
Keep the encoded values, labels, and visual state synchronized.

과용 주의AvoidAVOID

샘플에 오디오 시작 오프셋을 반영한다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

사전 추출한 16개 주파수 대역을 음악 시각과 맞춰 표시한다.

과용 · 나쁜 사례OVERUSE

임의 막대 높이를 실제 소리 분석값으로 소개한다.

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
샘플 속도	30fps	24~60fps	오디오에서 사전 추출
대역 수	16	8~32	주파수 순서 고정
스무딩	150ms	80~250ms	사전 배열에 적용
최소 높이	4px	2~8px	무음 바닥

GSAP

const tl=gsap.timeline({paused:true}),s={t:0};
tl.to(s,{t:2,duration:2,ease:'none',onUpdate:()=>{
 const f=s.t*30,i=Math.min(Math.floor(f),frames.length-2),p=f-i;
 ctx.clearRect(0,0,1920,1080);
 for(let b=0;b<16;b++){const v=frames[i][b]*(1-p)+frames[i+1][b]*p;
 const h=Math.max(4,v*240);ctx.fillRect(100+b*56,700-h,32,h);}
}});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 오디오 스펙트럼을 적용해. 사전 추출한 대역 배열을 시간으로 샘플링해 막대 길이에 매핑한다. 샘플 속도 30fps; 대역 수 16; 스무딩 150ms; 최소 높이 4px을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Codex

<파일>의 설명 장면에서 <대상>에 오디오 스펙트럼을 적용해. 사전 추출한 대역 배열을 시간으로 샘플링해 막대 길이에 매핑한다. 샘플 속도 30fps; 대역 수 16; 스무딩 150ms; 최소 높이 4px을 적용한다. 0초, 1초, 2초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Audio Spectrum Visualizer on <target> in <file>. Use precomputed 30fps audio samples with 16 bands, 150ms smoothing, and a 4px minimum bar height. Apply the audio start offset and clamp sample indices at both ends. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 1s, and 2s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.