웹브라우즈(Chrome/Edge) 사용 할 수 있는Javascript로 만든

STT(Speech-to-Text) & TTS (Text-to-Speech)

예제이다.

※ 소스

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Web STT + TTS Demo</title>
<style>
  body {
    font-family: Arial, sans-serif;
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
  }
  button {
    margin: 5px;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
  }
  textarea {
    width: 100%;
    height: 120px;
    margin-top: 10px;
    font-size: 14px;
  }
  audio {
    margin-top: 10px;
    width: 100%;
  }
</style>
</head>
<body>

<h2>🎙️ Web STT / 🔊 TTS Demo</h2>

<div>
  <button onclick="startSTT()">STT 시작</button>
  <button onclick="stopSTT()">STT 중지</button>
</div>

<textarea id="textBox" placeholder="음성 인식 결과 또는 직접 입력"></textarea>

<div>
  <button onclick="speak()">🔊 TTS 재생</button>
</div>

<hr>

<h3>🎧 음성 녹음</h3>
<button onclick="startRecord()">녹음 시작</button>
<button onclick="stopRecord()">녹음 종료</button>
<audio id="audioPlayer" controls></audio>

<script>
/* =========================
   1) STT (Speech-to-Text)
========================= */
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

let recognition;
if (SpeechRecognition) {
  recognition = new SpeechRecognition();
  recognition.lang = "ko-KR";
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onresult = (event) => {
    let text = "";
    for (let i = event.resultIndex; i < event.results.length; i++) {
      text += event.results[i][0].transcript;
    }
    document.getElementById("textBox").value = text;
  };

  recognition.onerror = (e) => console.error("STT error:", e);
} else {
  alert("이 브라우저는 STT를 지원하지 않습니다.");
}

function startSTT() {
  if (recognition) recognition.start();
}

function stopSTT() {
  if (recognition) recognition.stop();
}

/* =========================
   2) TTS (Text-to-Speech)
========================= */
function speak() {
  const text = document.getElementById("textBox").value;
  if (!text) return alert("텍스트를 입력하세요.");

  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = "ko-KR";
  utterance.rate = 1;   // 속도
  utterance.pitch = 1;  // 음높이
  speechSynthesis.speak(utterance);
}

/* =========================
   3) 음성 녹음 (MediaRecorder)
========================= */
let mediaRecorder;
let audioChunks = [];

async function startRecord() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  mediaRecorder = new MediaRecorder(stream);
  audioChunks = [];

  mediaRecorder.ondataavailable = event => {
    audioChunks.push(event.data);
  };

  mediaRecorder.onstop = () => {
    const blob = new Blob(audioChunks, { type: "audio/webm" });
    const url = URL.createObjectURL(blob);
    document.getElementById("audioPlayer").src = url;
  };

  mediaRecorder.start();
  console.log("녹음 시작");
}

function stopRecord() {
  if (mediaRecorder) {
    mediaRecorder.stop();
    console.log("녹음 종료");
  }
}
</script>

</body>
</html>

 

728x90
저작자표시 비영리 동일조건 (새창열림)

'Software > JavaScript' 카테고리의 다른 글

Javascript 시작하기 - ThreeJS로 육각형 그려서 크기 바꾸기#1  (0) 2026.02.08
Javascript 시작하기 - ThreeJS로 선그리기 #1  (0) 2026.02.08
웹캠 물체 인식(Object Detection)  (0) 2026.02.04
Javascript 시작하기 - WebSerial 사용  (0) 2024.08.22
Javascript 시작하기 - ThreeJS로 3D 모델 읽기  (0) 2024.08.21

+ Recent posts

티스토리툴바