[TTS]Web Speech API

 

Web Speech API는 음성 데이터를 웹 애플리케이션에서 쉽게 다룰 수 있도록 제공되는 API로, 크게 음성 합성(SpeechSynthesis) API와 음성 인식(SpeechRecognition) API로 구성되어 있습니다.

 

 

 

 

내가 알아본 Web Speech API

1. 브라우저마다 목소리가 다른가?

 

• 맞음.
  Web Speech API의 SpeechSynthesis는 브라우저와 운영체제(OS)가 제공하는 TTS 엔진을 호출하는 인터페이스일 뿐, 목소리를 직접 제공하지 않음.
• 따라서 같은 코드라도 OS/브라우저 환경에 따라 다른 목소리가 나오거나, 선택 가능한 voice 목록이 달라짐.
  • Chrome (Windows) → Windows OS의 기본 TTS 엔진을 사용.
  • Chrome (macOS) → macOS 내장 TTS(일부 Siri 계열 포함)를 사용.
  • Safari → macOS/iOS 시스템 음성을 그대로 사용.
  • Firefox → 지원은 제한적, 기본적으로 시스템 음성 의존.
  • Android/iOS → 기기 OS의 TTS 엔진을 그대로 활용.
• 이 때문에 상용 서비스에서는 일관된 음성을 제공하기 어려움 → 클라우드 TTS API(Google Cloud TTS, Azure TTS, OpenAI TTS 등)를 많이 병행 사용.

 

 

2. 공식 문서 (Docs)

제가 제공한 문서 링크:

• MDN 문서
  • SpeechSynthesis (영문)
  • Web Speech API (한국어)
• W3C Draft 스펙
  • Web Speech API의 초안 사양.

 

3. 한국어 지원 여부

• 브라우저/OS 환경에 따라 다름.
  • Chrome/Edge: 한국어 음성을 비교적 잘 지원.
  • Firefox/Safari: 지원이 제한적이거나 아예 없는 경우 있음.
• 음성 가용성
  • speechSynthesis.getVoices()로 나오는 voice 목록은 OS와 브라우저의 구현에 따라 달라짐.
  • 예: macOS에서는 설치된 일부 음성이 노출되지 않는 경우 있음.

 

4. 표준 여부

• Web Speech API는 W3C Draft 단계에 머물러 있는 비표준 API.
• 표준화가 진행되다 멈춘 상태라, 브라우저별 구현 차이가 크고 호환성 문제 존재.
• 특히 SpeechRecognition(음성 인식)은 크롬 외에는 지원이 거의 없으며, SpeechSynthesis(TTS)는 상대적으로 지원 범위가 넓음.
• 따라서 프로덕션 서비스에서는 Web Speech API만 단독 사용하기보다, 클라우드 TTS API와 병행하는 게 일반적.

 

📌 요약

• Web Speech API는 브라우저/OS에 따라 제공 음성이 다르다.
• 한국어는 Chrome/Edge에서 주로 잘 지원되며, Firefox/Safari는 제한적이다.
• 표준화된 API가 아니라 W3C Draft 단계의 비표준 API다.
• 실제 서비스에서는 클라우드 TTS API를 같이 쓰는 경우가 많다.

 

Web Speech API 한국어 지원 현황 (2025 기준)

브라우저 / 플랫폼	한국어 지원 여부	특징 및 제한사항
Chrome (Windows)	✅ 지원	Windows OS 기본 TTS 엔진 사용. Microsoft Heami, Microsoft SunHi 같은 한국어 음성이 제공됨.
Chrome (macOS)	✅ 지원	macOS에 설치된 한국어 음성(TTS) 사용 가능. 일부 Siri 계열 목소리는 API로 노출 안 될 수 있음.
Edge (Windows)	✅ 지원	Chrome과 동일하게 Windows OS의 한국어 음성을 그대로 사용.
Firefox (Windows/macOS)	⚠️ 제한적	음성 합성 API 지원은 있으나, voice 목록이 제한적이고 한국어가 보이지 않는 경우 많음.
Safari (macOS/iOS)	⚠️ 제한적	macOS/iOS의 시스템 음성을 활용하나, speechSynthesis.getVoices()에서 한국어 음성이 항상 노출되지 않음.
Android (Chrome/기본 브라우저)	✅ 지원	Android OS TTS 엔진(Google TTS, 삼성 TTS 등)에 따라 한국어 음성이 제공됨. 기기 설정에 좌우됨.
iOS (Safari/Chrome)	⚠️ 제한적	시스템에 한국어 음성이 있음에도 불구하고 API에서 바로 선택 불가한 경우 있음. iOS 버전에 따라 차이 존재.

 

1. Chrome/Edge (데스크탑) → 가장 안정적으로 한국어 지원.
2. Safari/Firefox → 음성 지원이 제한적이며, 한국어가 안 보일 수 있음.
3. 모바일(Android/iOS) → 기기 설정 및 내장 TTS 엔진에 크게 의존.
4. 표준 아님 (W3C Draft) → 브라우저별 차이가 존재하는 게 정상 동작.

 

구현한 사람들의 구현기 및 후기

https://sugar-family.tistory.com/775

내 웹사이트에 Text-to-Speech 기능 추가하기

 

https://wormwlrm.github.io/2024/03/09/Web-Speech-API.html?utm_source=chatgpt.com

Web Speech API로 프론트엔드에서 TTS 구현하기 - 재그지그의 개발 블로그

 -> 해당 블로그에서는 추천하지 않는다고 한다.

 

 

 

Web Speech API 목소리 들어보기(Demo)

https://mdn.github.io/dom-examples/web-speech-api/speak-easy-synthesis/?utm_source=chatgpt.com

https://codepen.io/matt-west/pen/DpmMgE

- 정보 https://mdn.github.io/dom-examples/web-speech-api/

Web Speech API

 

 

 

 

 

내 블로그에서 관련 글 보러가기 : TTS 서비스 비교