AnalyserNode
입김으로 촛불 끄기
해결하는 문제
소리의 크기만이 아니라 "어떤 소리인지"에 반응하는 화면을 만들고 싶다.
마이크 소리를 주파수별로 나눠 바람 소리의 낮은 대역을 찾아내고, 그 세기로 촛불을 끕니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것마이크 소리
브라우저가 하는 일주파수 분석(FFT)으로 800Hz 이하 저음 에너지 계산
나오는 것바람 세기 수치, 촛불 흔들림과 꺼짐
쓰는 브라우저 기술
getUserMedia (audio)Web Audio AnalyserNodegetByteFrequencyData
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- fftSize: 주파수를 몇 칸으로 나눌지
- smoothingTimeConstant: 값 흔들림 완화
- echoCancellation·noiseSuppression 끄기 (원음 그대로 받기)
- 저음 기준 주파수와 문턱값
자주 막히는 곳
- 브라우저의 잡음 제거가 켜져 있으면 바람 소리가 지워진다
- 사용자 클릭 전에는 오디오가 시작되지 않는다 (자동 재생 정책)
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 호흡 패턴을 분석하는 명상 코치
- 기침 소리 빈도 기록
웹 서비스
- 링크로 보내는 생일 축하 카드
- 호흡 재활 게임
피지컬 AI
- 입김으로 ESP32 선풍기·LED 끄기
- 부는 세기에 따라 움직이는 풍선 로봇
넓히는 방법
- 내쉬는 시간을 재는 호흡 연습
- 바람 세기로 풍차나 풍선 움직이기
- 주파수 모양으로 박수·휘파람·바람 구분
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
마이크에 "후" 하고 불면 Web Audio로 저음 에너지를 분석해서 케이크 촛불이 흔들리다 꺼지는 웹페이지를 만들어줘.
같은 분류의 능력
03 미디어 처리에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md