対象

僕自身、Bootcamp通い始めて2週間なので、初心者向けです
JavaScriptでなにか作る練習をしている人で、APIとか使ってみたいという方におすすめです

環境

Chrome バージョン: 70.0.3538.67（Official Build）（64 ビット）

概要

下記にコードもあげてあります（見た目などは最低限です）
- https://github.com/thatnaoki/janken_with_web_speech_api

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/sample.css">
    <title>じゃんけん</title>
</head>
<body>
    <header>
        <h1>じゃんけん</h1>
    </header>
    <main>
        <div class="user">
            <h2>あなたの手</h2>
            <img src="image/question.jpg" id="my-hand">
            <button id="btn">手を叫ぼう！</button>
        </div>

        <span class="vs">VS</span>

        <div class="pc">
            <h2>コンピューターの手</h2>
            <img id="pc-hand" src="image/gu.jpg">
        </div>
    </main>
    <span id="judge">どっちが勝つかな？</span>    
    <div class="score">
        あなたの戦績は<span class="wins">0</span>勝<span class="loses">0</span>敗です。
    </div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/script.js"></script>

</body>
</html>

script.js

//もろもろ定義
var pcHand = document.querySelector('#pc-hand');
var myHandNum;
var myHand = document.querySelector('#my-hand');
var judge;
var wins = 0;
var loses = 0;
var btn = document.querySelector('#btn');

//音声認識API
var speech = new webkitSpeechRecognition();

//日本語化
speech.lang = "ja";

//ボタンクリックで開始
btn.addEventListener('click', function() {
    speech.start();
});

//音声から自分の手を決定
speech.addEventListener('result', function(e) {
    console.log(e);
    var text = e.results[0][0].transcript;
    console.log(text)
    if(text == "Goo") {
        myHandNum = 0;
        myHand.src = "image/gu.jpg";
    }else if(text == "チョッキ" || text == "猪木") {
        myHandNum = 1;
        myHand.src = "image/cho.jpg";
    }else if (text == "パー") {
        myHandNum = 2;
        myHand.src = "image/par.jpg";
    }else {
        myHand.append("聞き取れません")
    }
    //pcの手の決定
    var pcHandNum = Math.floor(Math.random()*3);
    if(pcHandNum == 0) {
        pcHand.src = "image/gu.jpg";
    } else if(pcHandNum == 1) {
        pcHand.src = "image/cho.jpg";
    } else if(pcHandNum == 2) {
        pcHand.src = "image/par.jpg";
    }
    //勝敗判定
    if(myHandNum == 0 && pcHandNum == 1) {
        wins += 1;
        judge = "あなたの勝ち";
    } else if(myHandNum == 1 && pcHandNum == 2) {
        wins += 1;
        judge = "あなたの勝ち";
    } else if(myHandNum == 2 && pcHandNum == 0) {
        wins += 1;
        judge = "あなたの勝ち";
    } else if(myHandNum == pcHandNum) {
        judge = "ひきわけ";
    } else {
        loses += 1;
        judge = "あなたの負け";
    }
    document.querySelector(".wins").innerHTML = wins;
    document.querySelector(".loses").innerHTML = loses;
    document.querySelector("#judge").innerText = judge;
});

注意

今借りているサーバーおよびドメインでは、SSL未対応（独自ドメインを取得しないとSSL化できない）のため、Chromeのマイクがオンにできず、ローカルで試すしかありませんでした
参考：ローカルのプロジェクトをGitHubへアップロードする方法
最初戸惑ってしまったのですが、ブラウザのそういう安全性を担保してくれる仕様は有り難いですね
はやくSSL対応できるよう独自ドメインを取得したいと思います
※Web Speech API自体はローカルで試しても動きます

雑感

Web Speech APIは思った以上に簡単に使えました
間違い等あれば教えてください

Web Speech APIを使ってじゃんけんアプリを作ってみた

対象

環境

概要

注意

雑感