OscillatorNode
손가락 신디사이저
해결하는 문제
음원 파일 없이 효과음과 악기 소리가 필요하다.
음원 파일 없이 코드로 소리를 만듭니다. 손가락 위치가 음높이와 음색이 되고, 여러 손가락으로 화음을 냅니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것손가락 위치(x, y)
브라우저가 하는 일x는 5음 음계의 음높이, y는 필터 밝기로 변환
나오는 것손가락마다 따로 합성한 소리
쓰는 브라우저 기술
OscillatorNodeBiquadFilterNodeGainNodePointer Events
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 파형: sine, triangle, sawtooth, square
- 음계 고르기
- 소리가 커지고 사라지는 속도 (attack·release)
자주 막히는 곳
- 손을 떼도 소리가 계속 나는 경우: 정지 처리를 빼먹음
- 갑자기 끊으면 "틱" 하는 잡음이 난다 (음량을 서서히 줄여야 함)
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 허밍을 악보로 바꿔 연주
- AI가 만든 멜로디 연주기
웹 서비스
- 음악 수업 즉석 악기
- 특수교육 감각 놀이
피지컬 AI
- Web MIDI·시리얼로 실물 드럼 로봇 연주
- 센서 값을 소리로 바꾸는 장치
넓히는 방법
- Web MIDI로 실제 건반 연결
- 녹음해서 반복 연주(루프)
- 기울기 센서로 음 바꾸기
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
화면을 손가락으로 문지르면 위치에 따라 음이 바뀌는 멀티터치 신디사이저를 Web Audio로 만들어줘. 사이렌과 구급차 소리 버튼도 넣어줘.
같은 분류의 능력
03 미디어 처리에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md