MediaRecorder
목소리 변조 녹음기
해결하는 문제
녹음한 목소리를 프로그램 설치 없이 바꿔 보고 싶다.
녹음한 목소리를 오디오 데이터로 풀어 효과 장치(노드)에 통과시켜 다른 목소리로 들려줍니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것마이크 녹음 (webm)
브라우저가 하는 일오디오 버퍼로 풀어 효과 노드 연결
나오는 것효과를 입힌 재생, 원본 파일 저장
쓰는 브라우저 기술
MediaRecorderdecodeAudioDataDelayNodeConvolverNodeWaveShaperNode
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- playbackRate: 속도와 음높이
- DelayNode: 메아리 간격과 되먹임
- ConvolverNode: 잔향 길이
- 필터 주파수
자주 막히는 곳
- 사파리는 녹음 형식이 달라 해석에 실패할 수 있다
- 효과를 입힌 결과를 파일로 저장하려면 별도 처리가 필요하다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 녹음을 받아쓰기한 뒤 요약
- 목소리 감정 분석
웹 서비스
- 간이 팟캐스트 녹음실
- 말하기 과제 제출함
피지컬 AI
- 녹음한 소리를 ESP32 스피커로 재생하는 안내 장치
- 목소리 메모를 남기는 IoT 버튼
넓히는 방법
- OfflineAudioContext로 효과 입힌 파일 저장
- 실시간 마이크 변조
- 파형 편집기
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
목소리를 녹음해서 다람쥐, 거인, 로봇, 메아리, 동굴, 거꾸로 효과로 바꿔 들을 수 있는 웹페이지를 Web Audio로 만들어줘.
같은 분류의 능력
03 미디어 처리에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md