diff --git a/src/components/Panel/Items.tsx b/src/components/Panel/Items.tsx
index 7984c7b..5a2f9c1 100644
--- a/src/components/Panel/Items.tsx
+++ b/src/components/Panel/Items.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import styled from '@emotion/styled'
 import PlayButton from './PlayButton'
+import usePlayText from '../../hooks/usePlayText'
 
 export default function Items() {
   return <Item />
@@ -27,7 +28,12 @@ function Item() {
         onKeyDown={handleKeyDown}
         onChange={handleChange}
       />
-      <PlayButton />
+      {
+        <PlayButton
+          isPlaying={isPlaying}
+          onClick={isPlaying ? stop : () => play(value)}
+        />
+      }
     </ItemContainer>
   )
 }
diff --git a/src/components/Panel/PlayButton.tsx b/src/components/Panel/PlayButton.tsx
index 0b9ffca..0dddf8b 100644
--- a/src/components/Panel/PlayButton.tsx
+++ b/src/components/Panel/PlayButton.tsx
@@ -2,8 +2,14 @@ import styled from '@emotion/styled'
 import { useState } from 'react'
 import { buttonStyle } from './styles'
 import { ReactComponent as PlayIcon } from '../../res/play.svg'
+import { ReactComponent as StopIcon } from '../../res/stop.svg'
 
-export default function PlayButton() {
+interface IPlayButtonProps {
+  isPlaying: boolean
+  onClick: () => void
+}
+
+export default function PlayButton({ isPlaying, onClick }: IPlayButtonProps) {
   const [isHovered, setIsHovered] = useState(false)
   const handleMouseEnter = () => {
     setIsHovered(true)
@@ -13,13 +19,20 @@ export default function PlayButton() {
   }
 
   return (
-    <Button onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-      <PlayIcon fill={isHovered ? '#d65a31' : '#ffffff'} />
+    <Button role="button" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      {isPlaying ? (
+        <StopIcon onClick={onClick} />
+      ) : (
+        <PlayIcon fill={isHovered ? '#d65a31' : '#ffffff'} onClick={onClick} />
+      )}
     </Button>
   )
 }
 
 const Button = styled.div`
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
   ${buttonStyle}
   margin-top: 0.5rem;
 `
diff --git a/src/hooks/usePlayText.ts b/src/hooks/usePlayText.ts
new file mode 100644
index 0000000..5125a16
--- /dev/null
+++ b/src/hooks/usePlayText.ts
@@ -0,0 +1,55 @@
+import { useState, useRef } from 'react'
+
+interface IUsePlayText {
+  play: (text: string) => void
+  stop: () => void
+  isPlaying: boolean
+}
+
+const usePlayText = (): IUsePlayText => {
+  const [isPlaying, setIsPlaying] = useState<boolean>(false)
+  const intervalIdRef = useRef<NodeJS.Timeout | null>(null)
+
+  const play = (text: string) => {
+    if (text === '') {
+      return
+    }
+
+    setIsPlaying(true)
+
+    let index = 0
+    const textArray = text.split('')
+    const id = setInterval(() => {
+      const keyId = textArray[index].toLowerCase()
+      const event = new CustomEvent('threekeyboardevent', {
+        detail: {
+          keyId,
+        },
+      })
+      document.dispatchEvent(event)
+
+      index++
+
+      if (index === textArray.length) {
+        clearInterval(id)
+        setIsPlaying(false)
+        intervalIdRef.current = null
+      }
+    }, 200)
+
+    intervalIdRef.current = id
+  }
+
+  const stop = () => {
+    if (intervalIdRef.current) {
+      clearInterval(intervalIdRef.current)
+
+      intervalIdRef.current = null
+      setIsPlaying(false)
+    }
+  }
+
+  return { play, stop, isPlaying }
+}
+
+export default usePlayText
diff --git a/src/res/stop.svg b/src/res/stop.svg
new file mode 100644
index 0000000..b76a3f9
--- /dev/null
+++ b/src/res/stop.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 512 512" xml:space="preserve">
+<path d="M256,0C114.617,0,0,114.617,0,256s114.617,256,256,256s256-114.617,256-256S397.383,0,256,0z M336,320
+	c0,8.836-7.156,16-16,16H192c-8.844,0-16-7.164-16-16V192c0-8.836,7.156-16,16-16h128c8.844,0,16,7.164,16,16V320z"/>
+</svg>
\ No newline at end of file
diff --git a/src/types/ThreeEvent.d.ts b/src/types/ThreeEvent.d.ts
index 61eb9e5..2d26f0d 100644
--- a/src/types/ThreeEvent.d.ts
+++ b/src/types/ThreeEvent.d.ts
@@ -1,5 +1,5 @@
 export type ThreeEventType = {
-  keyId?: string
+  keyId?: string | null
 }
 
 interface ThreeCustomEvent {