【レポート】HTML5、日本語で音声入力する方法 | 開発・SE

【レポート】

HTML5、日本語で音声入力する方法

後藤大地　 [2011/05/24]

印刷

Google Chrome runs web pages and applications with lightning speed.

Chrome 11安定版にはスピーチ入力機能が実装されている。input要素の入力に音声を利用できるというもので、Chrome 11以降のバージョンを使っているなら、たとえばGoogle翻訳のページで簡単に試すことができる。Google翻訳の翻訳元言語を「英語」にすると、テキストエリアの右下にマイクのアイコンが表示される。このアイコンをクリックすると音声入力を受け付けるモードに入る。音声は英語に変換され、テキストエリアに表示される。

この機能はinput要素を拡張する形で実装されており、試してみるのに特別なプログラミンは必要ない。「<input x-webkit-speech type="text" />」のように、input要素の属性にHTML5の「x-webkit-speech」を指定すれば試すことができる。例えば、次に掲載するHTMLをChrome 11で閲覧すると、テキストフィールドの右端にマイクのアイコンが表示される。アイコンをクリックすると音声入力を促すプロンプトが表示されるので、マイク経由で日本語の文章を喋ればいい。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>HTML5 input and speech demo 01</title>
</head>
<body>
<input x-webkit-speech type="text" />
</body>
</html>

input要素に「x-webkit-speech」の属性を指定することで音声入力の機能を利用できる。

Google翻訳で入力できる言語は5月23日現在のところ英語だけだが、上記に掲載したHTMLでは日本語で入力する必要がある。英語で入力したい場合にはhtmlで指定しているlangの値を「lang="ja"」から「lang="en"」へ変更すればいい。「lang="ja"」のときには、英語で喋っても該当する日本語やカタカナに置き換えられたり、認識されなくなる。

音声入力の機能は「type="text"」以外のタイプで指定しても利用できる。ただし現在のところ、スピーチ入力をサポートした種類には限りがあり、すべてのtypeで音声入力が実施できるわけではない。次のようなHTMLを用意すれば、利用できるtypeの種類を確認できる。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>HTML5 input and speech demo 02</title>
</head>
<body>
<input x-webkit-speech type="text" /> (x-webkit-speech type="text")<br/>
<input x-webkit-speech type="tel" /> (x-webkit-speech type="tel")<br/>
<input x-webkit-speech type="url" /> (x-webkit-speech type="url")<br/>
<input x-webkit-speech type="email" /> (x-webkit-speech type="email")<br/>
<input x-webkit-speech type="date" /> (x-webkit-speech type="date")<br/>
<input x-webkit-speech type="number" /> (x-webkit-speech type="number")<br/>
<input x-webkit-speech type="color" /> (x-webkit-speech type="color")<br/>
<input x-webkit-speech type="password" /> (x-webkit-speech type="password")
</body>
</html>