このページの本文へ

Capture APIでiPhone用ビデオレコーダーを作ろう (2/5)

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

文●古籏一浩

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

Capture APIによる録音はシンプル

 Media APIによるボイスレコーダーでは、HTMLで録音・再生などの操作画面を作成し、JavaScriptで処理を指定する必要がありました。Capture APIの場合は非常にシンプルで、APIを呼び出してaudio要素のsrc属性にファイル名を指定するだけです。

 どのくらいシンプルなのか、実際のコードを見てください。エラー処理を含めてもわずか数行しかありません。


function captureAudio() {
    navigator.device.capture.captureAudio(captureSuccess, captureError);
}
function captureSuccess(mediaFiles) {
    document.getElementById("myAudio").src = mediaFiles[0].fullPath;
}
function captureError(error) {
    alert("Error !!:"+error.code);
}

 実際に録音処理を呼び出すのが、navigator.device.capture.captureAudio()です。第1引数には録音が成功した時に呼び出す関数を、第2引数にはエラーが発生したときに呼び出す関数を指定します。ちなみに、録音されなかった場合もエラーになります。

 録音が成功したときに呼び出される関数には、録音されたファイル情報を入れた配列変数が渡されます。iOSでは一度に1ファイルしか扱えませんので、渡されるファイル情報は常に1つだけになります。録音されたファイルに関する情報は以下のプロパティで取得できます。

nameファイル名
fullPathファイル名を含む完全なパス
typeファイルの種類(MIME Type)
lastModifiedDate最終更新日
sizeファイルサイズ(バイト数)

 録音されたファイルのフルパスをauido要素のsrc属性に指定すると、自動的に再生できる状態になります。

 ここまでをまとめたのが以下のプログラムになります。

【図】4.png

録音プログラム


<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <style type="text/css">
    audio { margin: 20px; }
  </style>
  <script type="text/javascript" charset="utf-8" src="phonegap.0.9.6.min.js"></script>
  <script type="text/javascript" charset="utf-8">
    // Capture APIで録音
    function captureAudio() {
      navigator.device.capture.captureAudio(captureSuccess, captureError);
    }
    function captureSuccess(mediaFiles) {
      document.getElementById("myAudio").src = mediaFiles[0].fullPath;
    }
    function captureError(error) {
      alert("Error !!:"+error.code);
    }
  </script>
 </head>
 <body>
  <h1>CaptureAPIで録音</h1>
  <div>
    <button onclick="captureAudio()">録音</button>
  </div>
  <audio src="" id="myAudio" controls></audio> 
 </body>
</html>

実機で確認してみよう

 完成したボイスレコーダーアプリを実機で確認しましょう。Capture APIの動作はiOSシミュレータでは確認できませんので、実機でチェックする必要があります。これまでと同様、MacとiPhoneを接続し、プロジェクトメニューで実機を指定してから「ビルドと実行」を選択します。しばらくするとアプリが実機に転送されます。

 アプリが起動すると「録音」ボタンとAudio要素のメッセージが表示されます。Audio要素はこの時点ではオーディオファイルを指定していないので、図のようなメッセージが表示されます。

【図】5.jpg

録音ボタンとAudio要素の内容が表示される

 録音ボタンをタップすると録音画面に切り替わります。

【図】6.jpg

録音画面に切り替わる

 画面下部にある●ボタンをタップすると録音が始まります。

【図】7.jpg

●ボタンをタップすると録音が開始される

 ■ボタンをタップすると録音が終了します。録音処理を終了させたい場合は、右上に表示されている「Done」ボタンをタップします。

【図】8.jpg

録音が完了した。右上のDoneボタンをタップすると元の画面に戻る

 録音が終了すると、録音したファイル名がAudio要素のsrc属性に設定され、音声を再生できるようになります。再生ボタンをタップすると、録音した内容が再生されるのを確認できます。

【図】9.jpg

再生ボタンをタップすると録音したデータが再生される

マイクの画像やボタンを変更するには

 録音時に表示されるマイクの画像やボタン画像は、PhoneGapプロジェクトフォルダのResources/Capture.bundle内に入っています。画像ファイルを上書きすることで録音時に表示する画像を変更できます。

この連載の記事

一覧へ

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