音声認識プログラムの作成 / Ubuntuでゆっくり生放送したい男の奮闘記①
どうもみなさんこんにちは！task58です。僕、ゆっくりボイスで生放送がしたいんですよね。それでググって見たらゆかりねっとを使えばいいことがわかったので早速インストール！！
そして起動！ﾎﾟﾁｯﾄﾅ
...あれ？起動しないぞ？真っ暗だぞ？タスクマネージャー見たら応答なしだぞ？
＼(^o^)／ｵﾜﾀ
というわけでゆかりねっとはwineで扱えない模様。そして俺の頭に思い浮かんだ方法それは！
自分でプログラム作ればいいじゃないか
と、いうわけで自分で作ることにしました。
調べてみるとpythonに丁度いいライブラリがあったのでpipでインストール！ﾎﾟﾁｯﾄﾅ
WARNING: Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None)) after connection broken by 'SSLError("Can't connect to HTTPS URL because the SSL module is not available.")': /simple/speechrecognition/
Oh...
そしてググって出てきた対処法もすべて無駄に終わった...
というわけでpythonは諦めます。
そしてJavaScript(node.js)＋chromeで作ることに。
まずはnode.jsを入れます。僕はすでに入ってましたが。
ubuntuならコマンドで「sudo apt install nodejs」と入力すればインストールできます。
その他linuxでもsnapとかで行けるかな？Linuxはダウンロードしてきたファイルをインストールするのがちょっとめんどいのでaptやsnapで入れることをおすすめします。
Macの方は公式サイトからインストーラーを入手してください。
インストールしたらコマンドに「node -v」と入力。するとバージョン表示が出てくるはずです。(バージョン番号は人によって違います)
$ node -v
v10.19.0
このように出てきたら導入成功です。
次にnpmを設定します。ライブラリなどの依存関係を管理するためのものです。
npmコマンドを使用します。node.jsに付属しているので別途インストールは不要です
新しいフォルダを作ってそこでこのコマンドを実行
「npm init -y」
そのままの勢いでexpressを導入します。
(expressはこのあとの作業を簡単にするためのもの程度に考えておいてください)
「npm install -s express」
そしてmain.jsを記述します。
フォルダ内にmain.jsを作成し、以下のように記述してください。
const express = require("express");
const fs = require("fs");
const app = express();
const html = fs.readFileSync("./index.html");
app.get("/",(req,res)=>{
res.write(html);
res.end()
})
app.listen(8000,()=>{
console.log("start!")
})
そして同じ要領でindex.htmlも記述します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="rec">rec!</button>
<p id="text"></p>
<script>
SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
const recognition = new SpeechRecognition();
const button = document.getElementById("rec");
const text = document.getElementById("text");
recognition.onresult = (event) => {
var res = event.results[0][0].transc。ript;
var old = text.innerText;
text.innerText = old + res + "\n"
}
recognition.onend = ()=>{
recognition.start()
}
button.addEventListener("click",()=>{
recognition.start()
})
</script>
</body>
</html>
そして「node main.js」でプログラムを起動。
ブラウザでlocalhost:8000にアクセスします。
「rec!」ボタンを押すと録音が開始されます。しゃべると...
ちゃんと認識された！！
何をしたのか
仕組みを解説していきます。と、その前に計画の全体像をお話します。
①chrome音声認識で文章に起こす。
②socket.ioでPCのプログラムに文章を送る
③SofTalkをプログラムからコマンドで叩いて文章を読ませる
今回作ったのは①の部分です。
HTMLファイルにJavaScriptも書いてますが許してください。
まずbodyタグ内に、録音開始ボタンと、文章を表示するpタグを作ります(以下のもの)
<button id="rec">rec!</button>
<p id="text"></p>
そんでscriptタグの中に処理を書いていきます。
まずこれ
SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
const recognition = new SpeechRecognition();
音声認識のためのAPIを取得し、使えるようにしています。
その次にさっきのボタンとpタグを取得
const button = document.getElementById("rec");
const text = document.getElementById("text");
そしてボタンを押されたときに録音を開始するよう設定します
button.addEventListener("click",()=>{
recognition.start()
})
最後に認識した文章をpタグに出力します。
recognition.onresult = (event) => {
var res = event.results[0][0].transcript;
var old = text.innerText;
text.innerText = old + res + "\n"
}
old+res+"\n"というのは、元からある文に認識したものを付け足して改行することを表します。
で、このままだといちいちrecボタンを押す必要があるので、一回押したらずっと認識し続けるようにします。そのためのプログラムがこれ↓
recognition.onend = ()=>{
recognition.start()
}
onendは録音が終わったときの処理を設定するものですが、ここにstart()を入れると終わると同時に録音が開始されるので、ずっと録音し続けてくれます。HTMLについては以上です。
で、main.jsは、localhostのポート8000番にサーバーを立てて上のプログラムを動かすためのものです。サーバーを立ててやることで、chromeの「サイトの設定」からマイクを常時許可にすることができます。そうすればわざわざ許可を押し続ける必要がなくなるので。
やってることは簡単で、expressをロードして、appを生成。fsでHTMLを読み込みます。
const express = require("express");
const fs = require("fs");
const app = express();
const html = fs.readFileSync("./index.html");
そして、サーバーにアクセスしたときにHTMLを表示するよう設定
app.get("/",(req,res)=>{
res.write(html);
res.end()
})
最後にポート8000番にサーバーを立てます。
app.listen(8000,()=>{
console.log("start!")
})
expressについては詳しく解説しませんが、「node.js express」ってググったらたくさんでてくるのでそちらをどうぞ。
と、いうわけで今回は音声認識までやりました。次回はsocket.ioでPCに文章を送信するプログラムを作ります！あとgithubにレポジトリを公開しておくのでそちらもご覧ください！
というわけでさいなら〜
コメント