speechSynthesis
안내방송 스튜디오
해결하는 문제
안내 방송을 사람이 매번 읽지 않고 정확하게 반복하고 싶다.
기기에 들어 있는 목소리로 문장을 읽고, 지금 읽는 단어를 화면에 표시합니다. 차임 소리는 코드로 만듭니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것방송할 문장
브라우저가 하는 일기기 내장 목소리로 음성 합성, 단어 경계 신호 받기
나오는 것차임과 방송, 읽는 단어 강조
쓰는 브라우저 기술
speechSynthesisSpeechSynthesisUtteranceonboundaryWeb Audio
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- voice: 기기에 설치된 목소리 고르기
- rate·pitch·volume
- 반복 횟수
자주 막히는 곳
- 기기마다 설치된 목소리가 달라 소리가 다르게 나온다
- 목소리 목록은 페이지가 열리고 조금 뒤에 채워진다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- AI가 상황별 방송 문구를 써서 바로 읽기
- 실시간 번역 안내방송
웹 서비스
- 학교·행사 안내방송 앱
- 읽어주기 접근성 버튼
피지컬 AI
- 낡은 휴대폰과 스피커로 만드는 방송 장치
- 센서 경보 시 자동 음성 안내
넓히는 방법
- 시간표에 맞춘 예약 방송
- 여러 언어 동시 방송
- 인터넷 없는 고품질 목소리 (kokoro-js)
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
적은 문장을 딩동댕동 차임과 함께 한국어 목소리로 두 번 읽어 주고, 읽고 있는 단어를 화면에 강조하는 안내방송 웹페이지를 만들어줘.
같은 분류의 능력
04 브라우저 속 AI에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md