KRDS Angular

음성 지원 TTS ​

TTS(Text-to-Speech)는 텍스트를 음성으로 변환하여 읽어주는 기능을 제공하는 버튼 컴포넌트이다. Web Speech API를 사용하며, 볼륨 아이콘과 재생 아이콘 두 가지 타입을 지원한다.

KRDS 가이드

기본 ​

기본 <button>에 krdsTts를 붙이고 읽을 글을 text로 줍니다. 버튼을 누르면 text를 한국어(ko-KR)로 읽고, 읽는 동안 정지 아이콘으로 바뀌어 다시 누르면 멈춥니다. 읽기 시작하면 (play), 눌러서 멈추면 (pause), 끝까지 읽으면 (end)를 보냅니다. 브라우저가 Web Speech API(speechSynthesis)를 지원하지 않거나 읽지 못하면 (error)로 알립니다.

ts
import { Component, signal } from '@angular/core'
import { KrdsTts } from '@krds.ui/angular'

@Component({
  selector: 'demo-tts-basic',
  imports: [KrdsTts],
  template: `
    <button
      krdsTts
      text="대한민국 정부 디자인 시스템 KRDS는 정부 서비스의 일관된 사용자 경험을 제공합니다."
      label="듣기"
      size="medium"
      icon="volume"
      (play)="status.set('읽는 중')"
      (pause)="status.set('멈춤')"
      (end)="status.set('다 읽음')"
      (error)="status.set('읽지 못함: ' + $event.message)"
    ></button>
    <p style="margin-top: 1rem">상태: {{ status() }}</p>
  `
})
export default class TtsBasic {
  readonly status = signal('대기')
}

아이콘만 ​

label이 없으면 아이콘만 표시되므로 aria-label로 버튼 이름을 제공합니다.

ts
import { Component } from '@angular/core'
import { KrdsTts } from '@krds.ui/angular'

@Component({
  selector: 'demo-tts-icon-only',
  imports: [KrdsTts],
  template: `
    <div style="display: flex; gap: 1rem; align-items: center">
      <button krdsTts text="볼륨 아이콘 타입입니다." icon="volume" aria-label="듣기"></button>
      <button krdsTts text="재생 아이콘 타입입니다." icon="play" aria-label="듣기"></button>
    </div>
  `
})
export default class TtsIconOnly {}

크기 ​

size로 xsmall, small, medium(기본) 중에서 고릅니다.

ts
import { Component } from '@angular/core'
import { KrdsTts } from '@krds.ui/angular'

@Component({
  selector: 'demo-tts-sizes',
  imports: [KrdsTts],
  template: `
    <div style="display: flex; flex-direction: column; gap: 1.5rem">
      <div style="display: flex; gap: 1rem; align-items: center">
        <button krdsTts text="xsmall 크기입니다." label="듣기" size="xsmall"></button>
        <button krdsTts text="small 크기입니다." label="듣기" size="small"></button>
        <button krdsTts text="medium 크기입니다." label="듣기" size="medium"></button>
      </div>
      <div style="display: flex; gap: 1rem; align-items: center">
        <button krdsTts text="xsmall 크기입니다." size="xsmall" aria-label="듣기"></button>
        <button krdsTts text="small 크기입니다." size="small" aria-label="듣기"></button>
        <button krdsTts text="medium 크기입니다." size="medium" aria-label="듣기"></button>
      </div>
    </div>
  `
})
export default class TtsSizes {}

아이콘 타입 ​

icon으로 볼륨 아이콘(volume, 기본)과 재생 아이콘(play) 중에서 고릅니다.

ts
import { Component } from '@angular/core'
import { KrdsTts } from '@krds.ui/angular'

@Component({
  selector: 'demo-tts-icon-types',
  imports: [KrdsTts],
  template: `
    <div style="display: flex; gap: 1rem; align-items: center">
      <button krdsTts text="볼륨 아이콘 타입입니다." label="듣기" icon="volume"></button>
      <button krdsTts text="재생 아이콘 타입입니다." label="듣기" icon="play"></button>
    </div>
  `
})
export default class TtsIconTypes {}

비활성화 ​

ts
import { Component } from '@angular/core'
import { KrdsTts } from '@krds.ui/angular'

@Component({
  selector: 'demo-tts-disabled',
  imports: [KrdsTts],
  template: `
    <div style="display: flex; gap: 1rem; align-items: center">
      <button krdsTts text="비활성화 상태입니다." label="듣기" disabled></button>
      <button krdsTts text="비활성화 상태입니다." aria-label="듣기" disabled></button>
      <button krdsTts text="비활성화 상태입니다." label="듣기" icon="play" disabled></button>
    </div>
  `
})
export default class TtsDisabled {}

KrdsTts ​

선택자 button[krdsTts]

Inputs

이름타입기본값설명
text (필수)string-읽을 글
labelstring-화면에 보이는 버튼 글자
size'xsmall' | 'small' | 'medium''medium'크기
icon'volume' | 'play''volume'아이콘
disabledbooleanfalse비활성화 (기본 disabled도 그대로 쓸 수 있음)

Outputs

이름값설명
playstring읽기 시작했을 때
pausevoid눌러서 멈췄을 때
endvoid끝까지 읽었을 때
errorError읽지 못했을 때 (SpeechSynthesis 미지원 포함)