오늘은 전에 STT에 대해서 조금 알아봐서 팀 프로젝트에 STT가 필요해 구현을 하기로 했습니다
STT 라이브러리의 종류가 너무 다양해서 프로젝트에 맞는 라이브러리를 고르기가 쉽지 않았는데, 코치님께서 Web speech API를 추천해주셔서 어떤건지 알아보고 사용하기로 정했습니다

Web speech API

Web Speech API는 웹 브라우저에서 제공되는 API로서 음성 인식(Speech Recognition)과 음성 합성(Speech Synthesis) 기능을 웹 애플리케이션에서 활용할 수 있게 해주는 기술입니다.

음성 인식 (Speech Recognition):

음성 인식은 사용자가 마이크를 통해 말한 음성을 웹 애플리케이션이 이해할 수 있는 텍스트로 자동으로 변환하는 기술입니다. 사용자가 키보드를 사용하지 않고 음성으로 입력할 수 있기 때문에 웹 애플리케이션과 사용자 사이의 상호작용을 편리하게 만들어줍니다. 예를 들어, 검색 엔진에 음성으로 검색어를 말하면 해당 검색어가 텍스트로 변환되어 검색 결과를 보여주는 것이 가능해집니다.

음성 합성 (Speech Synthesis):

음성 합성은 텍스트를 음성으로 자동으로 변환하여 웹 애플리케이션에서 사용자에게 음성으로 정보를 전달하는 기술입니다. 예를 들어, 웹 사이트에서 사용자에게 안내 메시지를 음성으로 들려주는 기능이 가능하며, 스마트 홈 디바이스 등에서 음성 알림을 제공하는 데 활용될 수 있습니다.

Web Speech API를 사용하려면 웹 브라우저에서 제공하는 기능을 활용하면 됩니다. 주로 JavaScript를 사용하여 API를 호출하고, 음성 인식과 음성 합성의 결과를 적절히 처리하여 웹 애플리케이션에 적용합니다.

장단점

장점:

• 사용자 경험을 향상시킵니다. 음성 인식을 통해 텍스트 입력을 대신할 수 있어 사용자가 편리하게 상호작용할 수 있습니다.

• 웹 접근성을 개선합니다. 시각적 장애가 있는 사용자들에게 음성 인식/합성을 통해 정보를 전달할 수 있습니다.

• 음성 기반의 기능을 개발할 수 있습니다. 음성 데이터를 수집하여 음성 인식 기반의 기능을 개발할 수 있습니다.

단점:

• 음성 인식의 정확도가 완벽하지 않을 수 있습니다. 언어, 발음, 환경 등에 따라 인식 오류가 발생할 수 있습니다.

• 브라우저 호환성에 제약이 있을 수 있습니다. 모든 브라우저에서 완벽하게 지원되지 않을 수 있으며, 특히 구형 브라우저에서는 지원이 미흡할 수 있습니다.

단점 중에 정확도는 사용자의 스크립트와 금칙어, 권장 단어를 받을 예정이라 이 데이터로 정확도를 끌어 올릴 수 있다고 들어서 사용하기로 마음먹었습니다

Web Speech API를 사용하여 웹 애플리케이션에 음성 기능을 추가하면 사용자 경험을 향상시킬 수 있으며, 접근성을 개선하여 더 많은 사용자들에게 서비스를 제공할 수 있습니다. 하지만 음성 인식의 정확도와 브라우저 호환성에 유의하여 사용해야 합니다.

원하는 기능

프로젝트 주제가 발표 연습이며, 사용자가 금칙어와 권장 단어를 지정하면 STT(Speech-to-Text)에서 받아온 텍스트에서 해당 단어를 찾아 카운트하는 기능을 구현하려고 합니다. 그리고 이때 "힌트"라는 기능을 활용하면 좋을거 같다는 코치님의 조언이 있어서 한번 찾아봤습니다.

힌트

"힌트"라는 기능은 사용자가 입력하는 텍스트에서 특정 단어를 지정하여, 해당 단어를 찾을 때 사용자에게 시각적 또는 오디오적인 방법으로 알려주는 기능입니다. 사용자가 금칙어와 권장 단어를 지정했을 때, STT를 통해 받아온 텍스트에서 이 단어들을 찾아 카운트해야 하는데, 이때 "힌트"를 사용하면 사용자에게 어떤 단어를 찾아야 하는지 시각적 또는 오디오적인 방법으로 알려줄 수 있습니다.

예를 들어, 사용자가 금칙어 "욕설"과 권장 단어 "감사합니다"를 지정했다고 가정해봅시다. 사용자가 발표를 하면서 "욕설"이라는 단어를 말하면, 웹 애플리케이션은 텍스트에서 "욕설"이라는 단어를 찾아 카운트하고, 동시에 "힌트"로서 사용자에게 "욕설"이라는 단어를 시각적으로 표시하거나 발음으로 알려줄 수 있습니다. 또한, 사용자가 권장 단어 "감사합니다"를 말하면, 해당 단어를 찾아 카운트하고, "힌트"로서 "감사합니다"라는 단어를 시각적 또는 오디오적으로 알려줄 수 있습니다.

"힌트"를 사용함으로써 사용자가 발표를 하는 동안 어떤 단어를 찾아야 하는지 알려줌으로써 사용자의 발표 연습을 도와주고, 특정 단어들의 사용 빈도를 카운트하여 피드백을 제공하는 기능을 구현할 수 있습니다. 또한, 시각적인 힌트를 통해 사용자에게 눈에 띄게 알려주거나, 오디오 힌트를 통해 사용자의 발음을 도와주는 등 발표 연습에 도움이 될 수 있습니다.

---

이렇게 공부를 하였고 Web speech API는 프론트엔드에서 사용되기에 리액트 코드로 구현해봤습니다

app.js

import React from "react";
import SpeechRecognitionComponent from "./SpeechRecognitionComponent";

function App() {
  return (
    <div>
      <h1>음성 인식 예제</h1>
      <SpeechRecognitionComponent />
    </div>
  );
}

export default App;

SpeechRecognitionComponent.js

import React, { useState } from "react";
import "./App.css";

const SpeechRecognitionComponent = () => {
  const [listening, setListening] = useState(false);
  const [transcript, setTranscript] = useState("");
  const [forbiddenWords, setForbiddenWords] = useState(["금지어1", "금지어2"]); // 초기 금칙어 리스트
  const [newForbiddenWord, setNewForbiddenWord] = useState(""); // 새로운 금칙어를 입력받기 위한 상태

  const [forbiddenWordsCount, setForbiddenWordsCount] = useState(0); // 금칙어 카운트

  const SpeechRecognition =
    window.SpeechRecognition || window.webkitSpeechRecognition;
  const recognition = new SpeechRecognition();
  recognition.lang = "ko-KR";
  recognition.continuous = true;

  recognition.onstart = () => {
    setListening(true);
    console.log("음성 인식 시작");
  };

  recognition.onend = () => {
    setListening(false);
    console.log("음성 인식 종료");
  };

  recognition.onresult = (event) => {
    const { transcript } = event.results[event.results.length - 1][0];
    setTranscript((prevTranscript) => prevTranscript + transcript + " ");

    // 금칙어 카운트 확인
    const words = transcript.split(" ");
    const forbiddenCount = words.filter((word) =>
      forbiddenWords.includes(word)
    ).length;
    setForbiddenWordsCount(forbiddenCount);
  };

  const handleStartStopListening = () => {
    if (listening) {
      recognition.stop();
    } else {
      recognition.start();
    }
  };

  const handleAddForbiddenWord = () => {
    if (newForbiddenWord.trim() !== "") {
      setForbiddenWords((prevForbiddenWords) => [
        ...prevForbiddenWords,
        newForbiddenWord,
      ]);
      setNewForbiddenWord("");
    }
  };

  return (
    <div className="container">
      <div className="my-3">
        {listening ? (
          <button
            id="stt-stop-button"
            className="btn btn-secondary"
            type="button"
            onClick={handleStartStopListening}
          >
            중지하기
          </button>
        ) : (
          <button
            id="stt-start-button"
            className="btn btn-secondary"
            type="button"
            onClick={handleStartStopListening}
          >
            음성인식 시작
          </button>
        )}
        {forbiddenWordsCount > 0 && (
          <span className="badge bg-danger ms-2">
            금칙어 발견: {forbiddenWordsCount}회
          </span>
        )}
      </div>

      <div className="my-3">
        <input
          type="text"
          className="form-control"
          placeholder="새로운 금칙어 입력"
          value={newForbiddenWord}
          onChange={(e) => setNewForbiddenWord(e.target.value)}
        />
        <button
          className="btn btn-primary mt-2"
          onClick={handleAddForbiddenWord}
        >
          금칙어 추가
        </button>
      </div>

      <p id="message">
        {listening ? "음성인식 중..." : "버튼을 누르고 말씀하세요."}
      </p>

      <div className="my-3">
        <textarea
          name="content"
          className="form-control"
          value={transcript}
          readOnly
        ></textarea>
      </div>
    </div>
  );
};

export default SpeechRecognitionComponent;

utils.js

// 브라우저가 Web Speech API를 지원하는지 확인하는 함수
export function isSpeechRecognitionSupported() {
  return "SpeechRecognition" in window || "webkitSpeechRecognition" in window;
}

아직 딱 음성을 텍스트화 해준다는 정도여서 수정을 많이 해야 할 거 같습니다. ㅜㅠ
나중에 진행 상황을 다시 올리겠습니다!!