Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

音声認識でジャルジャルの国名分けっこを実装した話

はじめに

こんにちは。ぱそきいろです。
みなさん、M1は見ましたか?
賛否は色々別れるかとは思いますが、個人的にジャルジャルの「国名分けっこ」がNo.1だったと思います。
そこでWebSpeechAPIを使って実際に「国名分けっこ」をするサイトを作ってみました。
もしよかったら見ていってください。

プロダクトデモ

完成品です。
声に合わせて、国の続きを言ってくれてることが分かります。

音声認識

はじめは、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系の知識が乏しいのでデプロイの方法とかが分からなかったです。コードは全部載せてあるので、興味がある人は試してみてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?