Web Speech APIが楽しそうなので実装してみたけど、いろいろとハマったのでメモ

環境

Vagrant ScotchBox3.0　（Ubuntu14.04）
Google Chrome (バージョン:60)で実行
macOS Sierra 10.12.6

前準備としてVagrantのWebサーバにHTTPSで接続できるようにする

いきなりVagrant upして、コードを書いてみたんだけどうまく動かなくて、、、ブラウザにマイクへのアクセスを許可しないといけないらしいのだけど、Chromeの設定などからいじってみても許可ができない。
どうやらhttpsでの接続じゃないと、ブラウザからマイクなどのデバイスへのアクセスを許可できないらしい。

というわけで、まずはVagrantで起ち上げたWebサーバにHTTPSで接続できるようにしました。

ApacheのSSLモジュールを有効にする

ScotchBoxを使っているのでUbuntuでのHTTPS接続の設定を参考にさせてもらいました。

$ sudo a2enmod ssl
$ sudo service apache2 reload

SSLモジュールを有効にしたら、apache再起動

テスト用のSSL証明書をつくる

$ sudo make-ssl-cert generate-default-snakeoil --force-ovarwrite
$ sudo make-ssl-cert /usr/share/ssl-cert/ssleay.cnf /etc/apache2/apache.pem

オレオレ証明書をつくるコマンドです。
実行したときに、ホスト名を聞かれるので、vagrantfileに設定しているホスト名を入力しました。
次にサブジェクト名というのを聞かれますが、空白で大丈夫みたいです。

$ sudo service apache2 reload

そしたらapache再起動

最後にSSL接続の設定ファイルを作成

$ cd /etc/apache2/sites-available
$ sudo cp default-ssl.conf ssl.conf
$ sudo a2ensite ssl
$ sudo service apache2 reload

SSLの設定ファイルのディレクトリに移動して、default-ssl.confをコピーしてssl.confを作成し、それをapacheに反映して再起動。

ドキュメントルートの設定

上記で作成した、ssl.confの中が

ssl.conf

DocumentRoot /var/www/html

となっています。scotchboxのデフォルトでのドキュメントルートはpublicになっているので、上記ディレクトリを作成するか、もしくはssl.confを書き替えます。

ssl.conf

DocumentRoot /var/www/public

と書き替えて

$ sudo service apache2 reload

apache再起動

これで、httpsでアクセスできるようになると思います。
とはいえ、オレオレ証明書なので、実際にブラウザで開くと、プライバシー保護されていません。みたいな事を言われます。
安全ではないアクセス。。みたいなところから無理やり開く感じになります。

いよいよ Web Speech APIを試します。

なんとかhttpsでのアクセスができたので、APIを試せるようになりました。

音声入力を試す。

onsei.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>音声入力テスト</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
//Web Speech API呼び出し
var recognition = new webkitSpeechRecognition();
recognition.lang = 'ja';

// 録音終了時の処理
recognition.addEventListener('result', function(e){
  console.log(e);
    var text = e.results[0][0].transcript;
    $("#result_text").val(text);
    alert('録音終了');
    $('.start').val('音声入力開始');
}, false);

// 録音開始したときの処理
function record(){
    $('.start').val('録音中です！');
    recognition.start();
}
</script>
</head>
<body>
<input type="text" class="text" id="result_text">
<input type="button" onClick="record()" value="音声入力開始" class="start" />
</body>
</html>

「音声入力開始」をクリックしてから、何かを喋ると音声入力できます。

読み上げを試す

yomiage.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <title>読み上げテスト</title>
</head>
<body>
  <textarea name="" id="read" cols="30" rows="10"></textarea><button class="start" href="#">読み上げ</button>
<script>
$('.start').on('click',function(e){
  e.preventDefault();

  var text = $('#read').val();
  var synthes = new SpeechSynthesisUtterance(
    text
  );
  synthes.lang = 'ja-JP';
  speechSynthesis.speak( synthes );
});
</script>
</body>
</html>

テキストエリアに何か入力して「読み上げ」をクリックすると、音声で読み上げてくれます。

Chromeでの「許可」

上記について、一番最初にアクセスしたときだけ、Chromeから「デバイスへのアクセスの許可」を求められます。最初の1回だけ「許可」してあげればあとは普通に使えます。

感想

とても簡単なコードで実装できるので、アイディア次第でいろいろなことに使えそうです。
楽しい。

参考サイト

Vagrant (Ubuntu) 環境でhttps接続する -KayaMemo-
VagrantでUbuntuサーバ/Apache2のSSL(https) -orangeProse別館-

Web Speech API -MDN-
Web Speech APIの実装 -CodeGrid-

Vagrant (ScotchBox) で、Web Speech APIを試す（ブラウザはChrome）