(1/3)audioタグと翻訳APIを組み合わせ、テキスト翻訳だけではない、「リスニング」もできるアプリを作成しよう。});今回は、audioタグを利用して、テキスト翻訳だけではない、「リスニング」もできるアプリを作成してみましょう。Google翻訳やExcite翻訳のようなWebサイトもたくさんありますが、これらのWebサイトでは、テキストを翻訳して表示するのみです。ここで紹介するのは、audioタグを利用し、Bing翻訳を利用することで、音声も流せるようになります。API」を利用します。このAPIは翻訳文字データだけでなく、翻訳した文字情報を「音声データ」に変換する機能が備わっています。これにHTML5のaudioタグを組み合わせることで、音声データが再生可能です。サンプルサイトを用意してありますので、一度お試しください。一般的に使われている翻訳サイト。翻訳したい文字列を入力したり、コピー&ペーストして翻訳するWebサイトです。APIを利用したサンプル作成しましたので、使用してみましょう。http://php5.xoop.jp/english/sample.html1.URLにアクセスすると以下の画面が表示されます。2.以下画像のように操作して見てください。※インターネット接続が必須です。3.翻訳ができることが確認できたと思います。4.次に「翻訳音声ロード」ボタンをクリックし、翻訳語音声を再生してみましょう。翻訳された言葉は長文であっても再生してくれます。したツールとして使えると思います。HTMLで音声を再生させるには?HTML5:audio要素audioタグは、音声を再生する際に使用します。再生する音声ファイルは、src属性で指定します。<audio>......</audio>の中には、audioタグがサポートされていない環境で表示させるメッセージを記述することができます。sourceタグは上から順番に読み込みますが、Webブラウザが対応してるファイルタイプを読み込んだ時点で止まるようになっています。そのためsourceタグを3つ記述してあっても、結果として1ファイルしか読み込まない仕様となります。<p>※ご利用のブラウザでは再生することができません。:インターフェイスを表示するJavaScriptから再生・停止も可能です。audioPause(){document.getElementById("audio").pause();}注意サーバ設定によって動作しない場合:「ogg形式の音声」を再生するには「.htaccess」に以下の記述を追加する必要があります。.ogv代表的なオーディオファイル:AAC(.aac)、MP3(.mp3)、Vorbis(.ogg)、WAVE(.wav)Webブラウザ実装状況:audioタグの実装状況としては、IE9〜、Chrome、Firefox、Safari、Operaなど最近のWebブラウザは実装済みです。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。