録音時間や空き容量を表示する
サンプル1は単純に録音・再生するだけのシンプルなものでした。そこで、サンプル1をベースに、録音・再生時間、ストレージの空き容量をリアルタイムで表示するようにプログラムを改良します。
録音時間はPhoneGapのドキュメントページに従い、setInterval()タイマーを使って表示します。Media APIでは現在どのくらいの時間録音したかを取得できないので、タイマーを使う必要があります。録音開始と同時に開始時間（実際はミリ秒）を変数startTimeに入れておき、現在時間（ミリ秒）からstartTimeの時間を減算したものを録音時間として表示します。
startTime = (new Date()).getTime()
var msec = (new Date()).getTime();
recTime = Math.floor((msec - startTime)/1000);
document.getElementById("time").innerHTML = recTime + "秒";
ストレージの空き容量はnavigator.fileMgr.getFreeDiskSpace()メソッドを使って取得できます。このメソッドは非同期でストレージの空き容量を返しますので、ストレージ容量が取得できたときに呼び出す関数を引数として指定しておきます。
呼び出される関数には空き容量がバイト数で渡されます。今回は、そのままバイト数を表示していますが、容量が大きいと分かりにくいのでMBやGBに修正して表示するようにしてもよいでしょう。HTML5のmeter要素を利用しても示せますが、現在のWebKitでは対応していないようです。iOS5であれば使えるようになるかもしれません。
navigator.fileMgr.getFreeDiskSpace(function(bytes){
document.getElementById("disk").innerHTML = "空き容量："+bytes+"バイト";
});
再生時間を表示する
再生時間を表示します。録音時にどのくらいの秒数録音されたかは変数recTimeに入れてありますが、recTimeで示される時間だけ録音されている保証はありません。iOSではMediaオブジェクトのオーディオデータの長さを測る方法がないので、大まかな目安として割り切りましょう。
再生ボタンがタップされたら1秒ごとにタイマーを使って再生秒数を表示し、再生秒数が録音時間を超えたらタイマーを停止させます。シンプルな仕組みですので、細かい説明は不要でしょう。
playTime = 0;
timerID = setInterval(function(){
document.getElementById("time").innerHTML = "再生時間："+playTime + "秒";
playTime = playTime + 1; // 再生時間を進める
if (playTime > recTime){ // 録音時間を超えたか？
clearInterval(timerID); // インターバルタイマーをクリア
document.getElementById("stat").innerHTML = "再生を停止しました";
}
}, 1000);
最後に、もう1つだけ仕様を変更してプログラムを完成させます。サンプル1では録音データを保存するファイル名を「rec.mp3」で固定していましたが、これでは以前録音したボイスデータが残ってしまうことがあります。そこで、次のように録音時のミリ秒をファイル名としています。
var basePath = String(location);
var path = basePath.substr(0, basePath.lastIndexOf("/"));
var msec = (new Date()).getTime();
var url = "documents"+path.substr(4,999)+"/"+msec+".mp3";
改良したプログラムが以下になります。
改良したプログラム
■サンプル2
<!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">
<meta name="format-detection" content="telephone=no">
<style type="text/css">
a { border:2px solid red; padding: 5px; }
#stat { margin:5px; }
#disk a { border:0px solid black; color:black; text-decoration: none; }
</style>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.6.min.js"></script>
<script type="text/javascript" charset="utf-8">
var rec = null;
var timerID = null;
var startTime = 0;
var recTime = 0;
var playTime = 0;
function startRec()
{
var basePath = String(location);
var path = basePath.substr(0, basePath.lastIndexOf("/"));
var msec = (new Date()).getTime();
var url = "documents"+path.substr(4,999)+"/"+msec+".mp3";
rec = new Media(url, function(){});
document.getElementById("stat").innerHTML = "録音中...";
rec.startAudioRecord();
startTime = (new Date()).getTime(); // 録音開始時間を変数に入れておく
timerID = setInterval(function(){
var msec = (new Date()).getTime();
recTime = Math.floor((msec - startTime)/1000);
document.getElementById("time").innerHTML = recTime + "秒";
navigator.fileMgr.getFreeDiskSpace(function(bytes){
document.getElementById("disk").innerHTML = "空き容量："+bytes+"バイト";
});
}, 1000);
}
function stopRec(){
rec.stopAudioRecord();
clearInterval(timerID); // インターバルタイマーをクリア
document.getElementById("stat").innerHTML = "録音を終了しました";
document.getElementById("time").innerHTML = recTime + "秒録音しました";
}
function playRec(){
rec.play();
document.getElementById("stat").innerHTML = "再生中...";
playTime = 0;
timerID = setInterval(function(){
document.getElementById("time").innerHTML = "再生時間："+playTime + "秒";
playTime = playTime + 1; // 再生時間を進める
if (playTime > recTime){ // 録音時間を超えたか？
clearInterval(timerID); // インターバルタイマーをクリア
document.getElementById("stat").innerHTML = "再生を停止しました";
}
}, 1000);
}
function playStop(){
rec.stop();
clearInterval(timerID); // インターバルタイマーをクリア
document.getElementById("stat").innerHTML = "再生を停止しました";
}
</script>
</head>
<body>
<h1>PhoneGapで録音2</h1>
<div>
<a onclick="startRec()">録 音</a>
<a onclick="stopRec()">録音停止</a>
<a onclick="playRec()">再生</a>
<a onclick="playStop()">再生停止</a>
</div>
<div id="stat"></div>
<div id="time"></div>
<div id="disk"></div>
</body>
</html>
