효과Effects / 데이터Data / Nº 248

오디오 파형Audio Waveform

Audio Waveform

오디오 파형

248

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

도판Fig. 248. 오디오 파형 · Audio Waveform · none

소리의 진폭을 나타내는 선이 시간에 따라 변한다.A line changes over time to display the amplitude of an audio signal.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

발화와 음악의 강약을 눈으로 보여준다.Makes the dynamics of speech and music visible.

언제 쓰나Use whenUSE WHEN

인터뷰 화면에 발화 강약을 표시할 때
음악 재생 위치와 진폭을 함께 보여줄 때

Show speech intensity beneath an interview excerpt.
Display the amplitude of a soundtrack alongside playback.

과용 주의AvoidAVOID

음원 분석값 대신 임의 진폭을 쓰지 않는다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

사전 분석한 256개 샘플을 24fps 프레임으로 선택해 높이 60px 파형을 그린다.

과용 · 나쁜 사례OVERUSE

무작위 파형을 만들어 실제 발화가 없는 순간에도 소리가 있는 것처럼 보인다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
분석 프레임	24fps	24~60fps	재생 시간으로 프레임을 선택한다.
프레임 샘플	256개	128~512개	사전 분석한 정규화 진폭이다.
최대 높이	60px	40~120px	위아래 합친 높이이다.
표시 폭	1200px	800~1600px	샘플을 동일 간격으로 배치한다.
이징	none	none \| power2.out \| power2.inOut	데이터의 시간 진행은 none을 유지한다.

GSAP

// frames contains precomputed PCM windows at 24 frames per second.
const tl=gsap.timeline({paused:true}),state={t:0};
const canvas=document.querySelector('canvas'),ctx=canvas.getContext('2d');
tl.to(state,{t:5,duration:5,ease:'none',onUpdate:()=>{
  const samples=frames[Math.min(frames.length-1,Math.floor(state.t*24))];
  ctx.clearRect(0,0,canvas.width,canvas.height);ctx.beginPath();
  samples.forEach((v,i)=>{const x=i*1200/(samples.length-1),y=100+v*30;i?ctx.lineTo(x,y):ctx.moveTo(x,y);});ctx.stroke();
}});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 오디오 파형를 구현해. 소리의 진폭을 나타내는 선이 시간에 따라 변한다. 분석 프레임 24fps, 프레임 샘플 256개, 최대 높이 60px, 표시 폭 1200px, 이징 none를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 음원 분석값 대신 임의 진폭을 쓰지 않는다.

Implement Audio Waveform for <target> in <file>. A line changes over time to display the amplitude of an audio signal. Use analysis frame rate: 24fps; samples per frame: 256; total waveform height: 60px; display width: 1200px; easing: none in a single paused GSAP core timeline that supports seeking. Use precomputed audio samples rather than invented amplitudes.

Codex

<파일>의 <대상> 장면에 오디오 파형를 적용해. 분석 프레임 24fps, 프레임 샘플 256개, 최대 높이 60px, 표시 폭 1200px, 이징 none를 사용하고 다음 동작을 구현해: 오디오 PCM 샘플 또는 사전 분석값으로 폴리라인을 그린다. 플러그인과 Math.random 없이 작성하고 1.25초·3.0초·5초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: 사전 분석한 256개 샘플을 24fps 프레임으로 선택해 높이 60px 파형을 그린다.

Apply Audio Waveform to the <target> scene in <file> using analysis frame rate: 24fps; samples per frame: 256; total waveform height: 60px; display width: 1200px; easing: none. A line changes over time to display the amplitude of an audio signal. Use prepared data or geometry with GSAP core, no plugins, and no Math.random; capture at 1.25, 3.0, 5 seconds to verify continuous intermediate geometry, correct endpoints, and identical output after repeated seeks. Use precomputed audio samples rather than invented amplitudes.