제가 브라우저로 G와 W만 있으면 축복할 수 있는 브라우저 앱을 만들어 봤어요.

만든 물건

컨디션

브라우저에서만 개발
그래서 Chrome만!
라이브러리

p5js 1.4.0

p5.speech.js 0.0.3

axios 0.27.2(최신)

브라우저에서만 개발

편집은 이쪽부터.
https://editor.p5js.org/
p5의 편집이기 때문에, 그렇게 프레임워크로 p5js를 사용합니다.

먼저 문자의 기원이다

https://idmnyu.github.io/p5.js-speech/
js 코드가 게재되었지만 ""도 변경되었습니다
완성형 코드는 맨 밑에 있으니 저쪽에서 참고하세요)
물론 라이브러리 내의 문서도 참고할 수 있다

const myRec = new p5.SpeechRec();

function setup() {
  // graphics stuff:
  createCanvas(windowWidth, windowHeight);
  background(255, 255, 255);
  fill(0, 0, 0, 255);
  // instructions:
  textSize(32);
  textAlign(CENTER);
  text("say something", width/2, height/2);
  myRec.onResult = showResult;
  myRec.continuous = true;
  myRec.interimResults = true;
  myRec.start();
}

function draw() {  
}

function showResult() {
  if(myRec.resultValue==true) {
    background(192, 255, 192);
    text(myRec.resultString, width/2, height/2);
    console.log(myRec.resultString);
  }
}

기본적으로 라이브러리의 샘플 상태를 유지한다

영역할게요.

https://qiita.com/tkyko13/items/f80503a04d33482d9983
영어 번역은 전에 한 적이 있기 때문에 여기를 참고하세요
그러나 APIKey의 취득 방법을 잊어버려서 아래 사이트를 참고하였습니다.
https://developer.a-blogcms.jp/document/javascript/google-translate-api.html

// https://console.cloud.google.com/apis/credentials/key/
const TRANSLATE_API_KEY = "api key";

const myRec = new p5.SpeechRec();
let traCount = -1; //frame

function setup() {
  // graphics stuff:
  createCanvas(windowWidth, windowHeight);
  background(255, 255, 255);
  fill(0, 0, 0, 255);
  // instructions:
  textSize(32);
  textAlign(CENTER);
  text("say something", width/2, height/2);
  myRec.onResult = showResult;
  myRec.continuous = true;
  myRec.interimResults = true;
  myRec.start();
}

async function draw() {
  traCount--;
  if(traCount == 0) {
    if(myRec.resultString != "") {
      // console.log(myRec.resultString);
      let enString = await getEnglish(myRec.resultString);
      // console.log(enString);
      background(255, 192, 192);
      text(myRec.resultString, width/2, height/2-30);
      text(enString, width/2, height/2+30);
    }
  }
}

function showResult() {
  if(myRec.resultValue==true) {
    background(192, 255, 192);
    text(myRec.resultString, width/2, height/2);
    // console.log(myRec.resultString);
    traCount = 60;
  }
}

async function getEnglish(word) {
  const traBaseURL = "https://translation.googleapis.com/language/translate/v2";
  const res = await axios.get(traBaseURL, {
    method: "post",
    params: {
      q: word,
      target: "en",
      key: TRANSLATE_API_KEY
    }
  });
  return res.data.data.translations[0].translatedText;
}

빈번하게 문자를 보낼 수 있지만 이후 그대로 영문 번역을 수행하면 많은 통신이 이뤄지고 항상 공짜가 아닌...
문자가 일으킨 상태가 1초 정도 변하지 않으면 영문 번역의 통신을 시작합니다(배경이 빨개집니다)

축복 효과

https://openprocessing.org/sketch/1562812
이것은 내가 직접 만든 것이니, 이것을 참고하여 교재를 화면으로 내려놓아라

완성

https://editor.p5js.org/tkyko13/sketches/1wUgFIFO_O
p5의 편집도 직접 공개할 수 있다
이번에도 공개하고 싶지 않은 API Key가 있어서 수정이 많이 저장됐어요.
여기 저장과 동시에 공개된 구름 편집기가 무섭네요.
만약 이런 상황이 없다면 간단하게 만질 수도 있고 포크를 조금 바꿀 수도 있어 좋아요!

총결산

https://gw-advent.9wick.com/calendars/2022/122
이 문장은 나의 추가 달력의 5/3분 문장(5/4 투고)이다.
다른 것도 재미있어 보이는 것들이 많으니 꼭 드셔보세요!