はじめに
こんにちは。ぱそきいろです。
みなさん、M1は見ましたか？
賛否は色々別れるかとは思いますが、個人的にジャルジャルの「国名分けっこ」がNo.1だったと思います。
そこでWebSpeechAPIを使って実際に「国名分けっこ」をするサイトを作ってみました。
もしよかったら見ていってください。
プロダクトデモ
国名分けっこを実装 pic.twitter.com/HvhnSV9zmp
— ぱそきいろ (@takacpu55) 2018年12月17日
完成品です。
声に合わせて、国の続きを言ってくれてることが分かります。
音声認識
はじめは、Google Cloud Speechを使おうと思ってたのですが、ハマりどころが多すぎてこちらのサイトを参考にして文字起こしをすることにしました。
それにしても、17行で音声認識をできるなんてすごいですね。
ありがとうございます。
国名分けっこについて
すでにやられてる人がいるんですね。
ジャルジャルの「国名分けっこ」を実装してみた
ただ、僕は音声認識をして見たかったので、上記の音声認識にプラスする形で実装しました。
取得した文字をひたすらif文で条件分岐し、対応する文字を表示させています。
ただし、例えば「アメリカ」の「アメ」だったら「雨」と認識されてしまうので何も考えずに分けるわけにはいきませんでした。一つづつ試して完成させました。
（「オーストラリア」の「オース」は「大須」と判断されました。）
コード
最後にコードを載せます。
jsとかhtmlを触ったことないので、開発環境がなく、メモ帳で書きました←
インデントが揃ってなくて見にくいのはご容赦ください。
fileName.js
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>国名分けっこ</title>
</head>
<body>
<h2>国名分けっこ</h2>
<button id="btn">start</button>
<div id="content"></div>
<p style="font-size:250px" id="con2" align="center"></p>
<p style="font-size:250px" id="test" align="center"></p>
<script>
const speech = new webkitSpeechRecognition();
speech.lang = 'ja-JP';
const btn = document.getElementById('btn');
const content = document.getElementById('content');
btn.addEventListener('click' , function() {
// 音声認識をスタート
speech.start();
});
//音声自動文字起こし機能
speech.onresult = function(e) {
speech.stop();
if(e.results[0].isFinal){
var autotext = e.results[0][0].transcript
console.log(e);
console.log(autotext);
test.innerHTML=autotext
//国名分けっこの追記部分
if(autotext=="イン"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "ドネシア" +'</div>';
}
if(autotext=="インド"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "ネシア" +'</div>';
}
if(autotext=="大須"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "トラリア" +'</div>';
}
if(autotext=="ある"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "ゼンチン" +'</div>';
}
if(autotext=="エジ"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "プト" +'</div>';
}
if(autotext=="2"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "ぽん" +'</div>';
}
if(autotext=="雨"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "リカ" +'</div>';
}
if(autotext=="フラ"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "ンス" +'</div>';
}
if(autotext=="意義"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "リス" +'</div>';
}
if(autotext=="土井"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "ツ" +'</div>';
}
if(autotext=="ど"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "イツ" +'</div>';
}
if(autotext=="アメリ"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "カ" +'</div>';
}
if(autotext=="イタリー"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "ア" +'</div>';
}
if(autotext=="いた"){
con2.innerHTML=""
con2.innerHTML += '<div>'+ "リア" +'</div>';
}
}
}
speech.onend = () => {
speech.start()
};
//--------------------------------//
</script>
<body>
<html>
まとめ
jsやhtmlをちゃんと触ったことがないので、殺風景な完成品となってしまいました。
また、Web系の知識が乏しいのでデプロイの方法とかが分からなかったです。コードは全部載せてあるので、興味がある人は試してみてください。