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属性に指定すると、自動的に再生できる状態になります。
ここまでをまとめたのが以下のプログラムになります。
<!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要素はこの時点ではオーディオファイルを指定していないので、図のようなメッセージが表示されます。
録音ボタンをタップすると録音画面に切り替わります。
画面下部にある●ボタンをタップすると録音が始まります。
■ボタンをタップすると録音が終了します。録音処理を終了させたい場合は、右上に表示されている「Done」ボタンをタップします。
録音が終了すると、録音したファイル名がAudio要素のsrc属性に設定され、音声を再生できるようになります。再生ボタンをタップすると、録音した内容が再生されるのを確認できます。
マイクの画像やボタンを変更するには
録音時に表示されるマイクの画像やボタン画像は、PhoneGapプロジェクトフォルダのResources/Capture.bundle内に入っています。画像ファイルを上書きすることで録音時に表示する画像を変更できます。