たった１分でJavaScriptだけ使ってブラウザにしゃべってもらう方法－ Web Speech APIでウェブサイトに音声機能を！

2020年3月24日 15:56

みなさんが作ったウェブサイトで、ユーザーが音声でテキスト入力（音声認識）したり、テキストを読ませたり（音声合成）する機能を追加したいと思ったことがありませんか。以前、Visual Studio Codeを使ってクラウドの音声機能を利用したプログラミングを紹介しました。

ただし、クラウドサービスを使わずに、速攻で音声認識や音声合成をやりたい場合、実はJavaScriptのAPIだけを使ってブラウザ内で音声機能を実現する方法があります。それがWeb Speech APIです。

Web Speech APIとは？

これはWeb技術の標準化を決める団体のW３Cというところで以前から進められているプロジェクトで、詳しい情報は次のリンクで見ることができます。

Web Speech APIの日本語の関連ページとしてはこれが参考になります。

では１分でやってみる！

詳しい背景はさておき、実際に音声合成を使ってみます。まず手順は次の通りです。

❶ メモ帳などのエディタでhtmlファイルを作る
❷ その中に７行のJavaScriptコードを書く
❸ ブラウザでページを開くといきなりしゃべり始める

たったこれだけ？そうなんです。半信半疑でしょうが、とにかくやってみましょう。

ステップ１：HTMLファイルを作る

まずは普段使っているエディタを開いてください。ここではWindowsのメモ帳を使います。まずは最小限のHTMLコードを書きます。とりあえずHTMLとBODY要素だけ入れてみます。

<html lang="ja">
<body>
</body>
</html>

ただ、せめてタイトルくらいは入れたいので次のHEAD要素を加え、そこに文字列のエンコードとタイトルを入れます。ここでは「私は日本語が話せます」にしてあります。もう一つ、BODY要素の中にSCRIPTタグも入れておいてください。JavaScriptはこの中に書きます。

<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>私は日本語が話せます</title>
</head>
<body>
   <script>
   //ここにJavaScriptを書く
   </script>
</body>
</html>

まずはこれをエディタ内にコピペして、ファイルを保存します。ただ、この時にファイルの拡張子を.htmlにし、さらに保存する文字コードをUTF-8にしてください。よくわからない方は次の手順で保存してください（メモ帳の場合）。

❶ ファイルメニューから「名前を付けて保存」を選択
❷ 保存先を選択（とりあえずデスクトップを選ぶ）
❸ ファイルの種類として「すべてのファイル」を選ぶ
❹ 名前を付ける（とりあえずspeech.htmlにする）
❺ 文字コードとしてUTF-8を選択
❻ 「保存」をクリックする

まずはHTMLファイルを開いてみる

ここでどんなページになっているか確認してみます。デスクトップ（別の保存場所を選んだ場合はそれに応じて開く）でspeech.htmlをダブルクリックするだけです。

真っ白なブランクページです。ただ、自分が書いたコードであることは、タイトルタブに「私は日本語が話せます」と表示されていることから確認できます。

ステップ２：JavaScriptコードを７行書く

ではいよいよブラウザをしゃべらせるJavaScriptコードを書いてみます。SCRIPタグの間に次の７行をコピペして入れてみてください。

<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>私は日本語が話せます</title>
</head>
<body>
   <script>
  	let uttearnce = new SpeechSynthesisUtterance();
   	uttearnce.text = '私は日本語が話せます';
   	uttearnce.volume = 1;
   	uttearnce.rate = 1;
   	uttearnce.pitch = 1;
   	uttearnce.lang = 'ja-JP'
   	window.speechSynthesis.speak(uttearnce);
   </script>
</body>
</html>

できたらファイルを保存します。

ステップ３：完成したページを開くとしゃべる！

変更を保存したら、あとはファイルを開くだけです。何の解説も必要ないと思いますが、ページが開くと同時に「私は日本語が話せます」としゃべったはずです。たったこれだけで音声合成機能を使ってコンピューターをしゃべらせることができました！

もし興味があれば、コードの中のこの行で別の日本語を入れてみてください。タイプした日本語通りにしゃべるはず。

  	uttearnce.text = '私は日本語が話せます';

さらに英語をしゃべらせたかったら、この行のja-JPをen-USにしてみてください。

  	uttearnce.lang = 'en-US';

もちろんtextには英語を入れてくださいね。もっと遊びたかったら、textnには英語、langにはja-JPを指定してみます。すると「日本語アクセントの英語」になるのも面白いです。いろいろとコードを変えながら遊んでみて下さい。

主要なブラウザで使える

Web Speech APIは現在、WindowsやMacでのChrome、Safari、Edge、Firefoxなどの主要ブラウザーの他、Android携帯のChromeやiPhoneのSafariなどでも動くことが確認されています。ただ、動作しないものもあるようなので、サポートされているデスクトップ環境とモバイル環境については先に紹介したサイトで詳しく説明されています。

これからどう発展させるか

今回はとりあえずWeb Speech APIがいかに手軽に使えるかを説明するために、その最低手順を紹介しました。今後は実際のウェブサイトあるいはウェブアプリでどうやって音声合成や音声認識を使っていくか、実際にアプリを作りながら解説していく予定です。もし自分が作ったサイトに音声機能を加えたいと考えている方はぜひ参考にしてみてください。

この記事が気に入ったらサポートをしてみませんか？