前回と今回は、「Hello World」プログラムを通じて、コーディング作業における実践的なノウハウを解説しています。

1. Hello Worldを作ってみよう!
2. 時間に応じて、挨拶を変えてみよう
3. 挨拶をしゃべってもらおう(WebSpeechAPIを利用してみよう)
4. 作成済みのUI部品を適用してみよう(再利用のための部品化を検討してみよう)

 1と2が前回、3と4が今回です。

3. 挨拶をしゃべってもらおう(WebSpeechAPIの利用)

 動画の再生や、音声出力など、多彩な表現も、HTML5の魅力の一つです。「WebSpeechAPI」を利用すると指定した文字列を読み上げることができます。ただし、iOSは7以降、Androidはバージョンによっては非対応です。 先ほどの例に、挨拶を読み上げるボタンを追加してみましょう。

図1●挨拶をしゃべってもらおう(WebSpeechAPIの利用)

3-1. 最初の実装

 HTMLに読み上げ機能を呼び出すボタンを設置します(図2)。また、実際に読み上げを行う関数は別ファイルに記述し、HTMLから読み込みます(speak.js、図3)。 読み上げ処理を呼び出す際は、音声のスピードや音量、ピッチなどを指定できます。ここで定義した関数は名前空間(itpro.sample.util)を指定して公開します。

図2●コード例:WebSpeechAPI利用版(index.html)
[画像のクリックで拡大表示]
図3●コード例:WebSpeechAPI利用版(speak.js)
[画像のクリックで拡大表示]

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら