発した言葉の中にGとWがあれば祝福してくれるブラウザアプリをブラウザのみで作ってみた

## 作ったもの

<iframe width="908" height="485" src="https://www.youtube.com/embed/yg3HhrlI3-E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/gw?src=hash&amp;ref_src=twsrc%5Etfw">#gw</a> 発した言葉の中にGとWがあれば祝福してくれるブラウザアプリ<br>開発もブラウザのみでやってみた！<br>記事はこのあと投稿するよ（アドベントカレンダーに間に合わず…） <a href="https://t.co/L2PFYjUXns">pic.twitter.com/L2PFYjUXns</a></p>&mdash; おの (@tkyko13) <a href="https://twitter.com/tkyko13/status/1521821885226708993?ref_src=twsrc%5Etfw">May 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 環境

開発をブラウザのみで行いました
なので、`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のコードは載せていますが、htmlも変更しています

完成形のコードは一番下にあるので、そちらのほうからhtmlの参考をお願いします

もちろんライブラリ内のドキュメントを参考にしてもらっても

```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

```js
// 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;
}
```

[![Image from Gyazo](https://i.gyazo.com/f5cd29b8ba8e989403178156dc6396b6.gif)](https://gyazo.com/f5cd29b8ba8e989403178156dc6396b6)

文字起こしは頻繁に取得できるのですが、その後そのまま英訳を実行しちゃうとたくさん通信しちゃうし、ずっと無料でもないので…
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投稿）

他のも面白そうなのがたくさんあるのでぜひどうぞ！