このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第73回

JavaScriptで作れるiPhone用ボイスレコーダー

2011年10月12日 11時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
js-labo

 HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。PhoneGapでは、通常のWebアプリでは実現できない、スマートフォンならではの機能を使ったアプリも作れます。今回は、iPhone用のボイスレコーダーアプリを作ってみましょう。

 PhoneGapで音声を録音するには、W3Cで仕様策定中のCapture APIと、Phone Gap独自のMedia APIの2つの方法があります。Capture APIを使うと専用のUIに切り替わりるので、JavaScriptでは録音と再生しか処理できません。一方、Media APIでは、通常のWebページの中に録音・再生機能を埋め込んでアプリを作れます(ただし、現行バージョンではまれに録音が途切れることがあります)。今回は、Media APIを採用します。

 なお、録音処理はiOSシミュレーターでは動作しませんので、必ず実機を接続して動作を確認する必要があります。本サンプルでは一度録音したファイルを削除していないので、何度も録音を繰り返すとストレージの空き容量を圧迫します。録音データを削除したい場合は、iPhone/iPadに入れた本アプリを一度削除してください。

録音もMedia APIで

 Media APIは前回、音楽を再生するのに使用したAPIです。

 Media APIは音楽を再生するだけでなく、録音もできます。ただし、Android OSとiOSでは以下のように使用するメソッドが異なります。

 Androidの場合iOSの場合
録音開始startRecord()startAuidoRecord()
録音終了stopRecord()stopAuidoRecord()

 PhoneGap 1.1.0のドキュメントでは、iOSの場合、「あらかじめ録音するファイルが存在しなければならない」とありますが、実際に試してみると、ファイルを用意しなくても、new Media()で正しいパス+ファイル名でオブジェクトを生成すると録音できます。

 また、PhoneGapに関する解説ページで、navigator.notification.activityStart()やnavigator.notification.activityStop()が記述されている場合がありますが、これらのメソッドはすでに廃止予定になっており、0.9.6以降では書かなくても動作します(下位互換性のため、このメソッドを記述しても動作には影響ないようです)。

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング