JS STT, annyang API

jangky000·2020년 10월 23일

Express 설치

// Express-generator라는 패키지를 통해서 
// 프레임워크에 필요한 pakage.json과 기본 구조까지 잡을 수 있다!
// npx를 사용함으로 최신 버전 사용 가능
npx express-generator --view=ejs

// node module 설치, npm 모듈을 설치
npm i

.gitignore 설정

node_modules

ESLint Prettier 설정

npm install eslint -D
npx eslint --init
// commonJS 선택하기

package.json
"scripts": {
    "start": "node ./bin/www",
    "lint": "eslint ./* --fix"
  },

npm install prettier -D

충돌 방지
npm install eslint-config-prettier eslint-plugin-prettier -D

.eslintrc.js에 
extends: ["eslint:recommended", "plugin:prettier/recommended"], // 추가

npm install husky -D
npm install lint-staged -D

// package.json에 추가
,
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "npm run lint"
  }

// .eslintrc.js
// rules 추가
,
  rules: {
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
      },
    ],
    "no-unused-vars": "warn",
    "no-console": "off",
    "func-names": "off",
    "no-process-exit": "off",
    "object-shorthand": "off",
    "class-methods-use-this": "off",
  },

// .eslintignore로 무시할 파일들 추가하기
README.md
package.json
package-lock.json
.eslintrc.js

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
    node: true,
  },
  extends: ["eslint:recommended", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
      },
    ],
    "no-unused-vars": "warn",
    "no-console": "off",
    "func-names": "off",
    "no-process-exit": "off",
    "object-shorthand": "off",
    "class-methods-use-this": "off",
  },
};

package.json

{
  "name": "javascript-stt",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "lint": "eslint ./* --fix"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  },
  "devDependencies": {
    "eslint": "^7.11.0",
    "eslint-config-prettier": "^6.14.0",
    "eslint-plugin-prettier": "^3.1.4",
    "husky": "^4.3.0",
    "lint-staged": "^10.4.2",
    "prettier": "^2.1.2"
  }
  ,
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "npm run lint"
  }
}

.eslintignore

README.md
package.json
package-lock.json
.eslintrc.js

Annyang STT API → 근데 web speech API를 자체적으로 제공해준다..

깃허브: https://github.com/TalAter/annyang

참고: https://jeongchul.tistory.com/539

annyang.js

https://github.com/TalAter/annyang/blob/master/src/annyang.js

recognition.lang = 'en-US'; 를  recognition.lang = 'ko';로 변경

설명서

https://github.com/TalAter/annyang/blob/master/docs/README.md

heroku 배포

heroku 앱 생성
heroku login
heroku git:remote -a 앱 이름

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src='javascripts/annyang.js'></script>
    
  </head>
  <body>
    <header>
      annyang STT API 테스트
    </header>

    <main>
      <div class="btnComp">
        <div class="container">
          <button id="recBtn">마이크 시작</button>
          <button id="stopBtn">마이크 끄기</button>
        </div>
      </div>
  
      <div class="sttResultComp">
        <div class="container">
          <div>STT 결과 목록...</div>
          <ul id="sttResult"></ul>
        </div>
      </div>
    </main>
    <script src="javascripts/event.js"></script>
  </body>
</html>

event.js

(() => {
  const recBtn = document.getElementById("recBtn");
  const stopBtn = document.getElementById("stopBtn");
  recBtn.addEventListener("click", recBtnHandler);
  stopBtn.addEventListener("click", stopBtnHandler);
})();

const ul = document.getElementById("sttResult");

function recBtnHandler() {
  annyang.start({ autoRestart: false, continuous: false });
  const recognition = annyang.getSpeechRecognizer();
  let final_transcript = "";
  recognition.interimResults = true;
  recognition.onresult = function (event) {
    console.log(event);
    // let interim_transcript = "";
    // final_transcript = "";
    for (let i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
        console.log("final_transcript=" + final_transcript);
        //annyang.trigger(final_transcript); //If the sentence is "final" for the Web Speech API, we can try to trigger the sentence
        const html = `<li>${final_transcript}</li>`;

        ul.insertAdjacentHTML("beforeend", html);
      } else {
        // interim_transcript += event.results[i][0].transcript;
        // console.log("interim_transcript=" + interim_transcript);
      }
    }
    // console.log("중간값: " + interim_transcript);
    // console.log("결과값: " + final_transcript);
  };
}

function stopBtnHandler() {
  annyang.abort();
}