KRDS Vue

음성 지원 TTS ​

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

KRDS 가이드

기본 ​

버튼을 누르면 text를 한국어(ko-KR)로 읽고, 읽는 동안 정지 아이콘으로 바뀌어 다시 누르면 멈춥니다.

vue
<script setup lang="ts">
  import { KrdsTts } from '@krds.ui/vue'
</script>

<template>
  <KrdsTts
    text="대한민국 정부 디자인 시스템 KRDS는 정부 서비스의 일관된 사용자 경험을 제공합니다."
    label="듣기"
    size="medium"
    icon="volume"
  />
</template>

아이콘만 ​

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

vue
<script setup lang="ts">
  import { KrdsTts } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; gap: 1rem; align-items: center">
    <KrdsTts text="볼륨 아이콘 타입입니다." icon="volume" aria-label="듣기" />
    <KrdsTts text="재생 아이콘 타입입니다." icon="play" aria-label="듣기" />
  </div>
</template>

크기 ​

vue
<script setup lang="ts">
  import { KrdsTts } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 1.5rem">
    <div style="display: flex; gap: 1rem; align-items: center">
      <KrdsTts text="xsmall 크기입니다." label="듣기" size="xsmall" />
      <KrdsTts text="small 크기입니다." label="듣기" size="small" />
      <KrdsTts text="medium 크기입니다." label="듣기" size="medium" />
    </div>
    <div style="display: flex; gap: 1rem; align-items: center">
      <KrdsTts text="xsmall 크기입니다." size="xsmall" aria-label="듣기" />
      <KrdsTts text="small 크기입니다." size="small" aria-label="듣기" />
      <KrdsTts text="medium 크기입니다." size="medium" aria-label="듣기" />
    </div>
  </div>
</template>

아이콘 타입 ​

vue
<script setup lang="ts">
  import { KrdsTts } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; gap: 1rem; align-items: center">
    <KrdsTts text="볼륨 아이콘 타입입니다." label="듣기" icon="volume" />
    <KrdsTts text="재생 아이콘 타입입니다." label="듣기" icon="play" />
  </div>
</template>

비활성화 ​

vue
<script setup lang="ts">
  import { KrdsTts } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; gap: 1rem; align-items: center">
    <KrdsTts text="비활성화 상태입니다." label="듣기" disabled />
    <KrdsTts text="비활성화 상태입니다." aria-label="듣기" disabled />
    <KrdsTts text="비활성화 상태입니다." label="듣기" icon="play" disabled />
  </div>
</template>

KrdsTts ​

Props

이름타입기본값설명
classKrdsClassValue-CSS 클래스
labelstring-레이블 텍스트 (미지정 시 아이콘만 표시)
disabledbooleanfalse비활성화 여부
sizeTtsSize'medium'버튼 크기
iconTtsIcon'volume'아이콘 타입
text (필수)string-읽어줄 텍스트

Events

이름인자설명
error[error: Error]음성 합성을 지원하지 않거나 읽기에 실패했을 때
pause[]일시 정지했을 때
play[text: string]읽기를 시작했을 때 (읽는 문장)
end[]읽기가 끝났을 때