このページの本文へ

JavaScriptで作れるiPhone用ボイスレコーダー (2/5)

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

文●古籏一浩

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

PhoneGapプロジェクトの作成

 今回作成する簡易ボイスレコーダーのアプリは、以下の4つのボタンがあります。

録 音録音を開始するボタン
録音停止録音を停止するボタン
再生録音したボイスデータを再生するボタン
再生停止再生されているボイスデータを停止

 これらのボタンをタップして録音や再生などを操作します。

 いつものようにプロジェクトを作成しましょう。Xcodeを起動し、以下の手順でPhoneGapプロジェクトを作成します。

【図】1.png

ファイルメニューから「新規プロジェクト...」を選択

【図】2.png

PhoneGap-based Applicationを選択し、「選択...」ボタンをクリック

【図】3.png

作成するプロジェクト名を入力し保存

【図】4.png

新規にプロジェクトが作成される。今回は新たに追加するファイルはない

 プロジェクトが作成されたら準備完了です。今回は追加するプラグインやサウンドファイルなどはありません。

startRec()で録音開始

 PhoneGapで録音を開始するボタンは以下のようになっています。


<a onclick="startRec()">録 音</a>

 よく見るとa要素に必須のhref属性がありません。HTML5ではhref属性は必須ではなくなり、プログラムで内容を入れ替えるような場合(プレースホルダー)には省略できます。録音の文字がクリックされると録音を処理するstartRec関数が呼び出されます。このstartRec関数は以下のようになっています。


var rec = null;
function startRec()
{
  var basePath = String(location);
  var path = basePath.substr(0, basePath.lastIndexOf("/"));
  var url = "documents"+path.substr(4,999)+"/rec.mp3";
  rec = new Media(url, function(){});
  document.getElementById("stat").innerHTML = "録音中...";
  rec.startAudioRecord();
}

 basePath、pathの部分の行はこれまでの連載でも何度か出てきましたが、現在実行されているアプリの基準パスを求める処理です。ボイスレコーダーでも保存先のパスを指定するために必要になります。

 var url〜の行では、保存するファイル名を指定します。file:でなくdocuments:を使ってローカルファイルを指定していますが、PhoneGapのバージョンによってはfile:でも動作するのかもしれません(バージョンアップによって変わってしまう可能性もあります。ここではバージョン0.9.6を前提にしています。将来的にはW3C標準のCapture APIを使用する方向になります)。

 保存するファイル名は「rec.mp3」としました。録音が開始されると、このファイルに録音データが蓄積されていきます。ただ、実際に録音してみると以前録音したデータの一部が残っていたり、多少不具合もあるようです。

 次に、new Media()として録音するファイル名を最初の引数に渡します。2番目の引数は使用しないので空の関数にしてあります。


rec = new Media(url, function(){});

 以上で準備が完了しました。あとは録音を開始するだけです。MediaオブジェクトのstartAudioRecord()メソッドを使い、以下のようにします。


rec.startAudioRecord();

 これで録音が開始されますが、実際に録音されるまでには数秒間のタイムラグが発生することがあります。最初の1〜2秒は録音される可能性は低いと考えてよいでしょう。

録音停止と再生処理

 続いて、録音を停止する処理です。録音停止ボタンは以下のようになっています。


<a onclick="stopRec()">録音停止</a>

 録音停止ボタンがタップされるとstopRec()関数が呼び出されます。この関数内で録音停止を処理します。以下の一行で終わりです。


rec.stopAudioRecord()

 これでMediaオブジェクトで指定したファイルに録音データが保存されます。まれに、録音が途中で停止してしまうことがありますが原因は不明です。

 録音したボイスデータを再生してみましょう。録音したデータはMediaオブジェクトに入ったままですので、以下のようにplay()メソッドを呼び出すと再生されます。


rec.play()

 再生されているボイスデータを停止するには以下のようにstop()メソッドを使います。なお、このstop()メソッドを呼び出すと再生位置が先頭に戻ってしまいます。一時停止させるのであればpause()メソッドを使ってください。


rec.stop()

 ここまでをまとめたのが以下のコードになります。

【図】5.png

簡易ボイスレコーダーのプログラム

■サンプル1


<!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">
  a { border:2px solid red; padding: 5px; }
  #stat { margin:5px; }
  </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;
  function startRec()
  {
    var basePath = String(location);
    var path = basePath.substr(0, basePath.lastIndexOf("/"));
    var url = "documents"+path.substr(4,999)+"/rec.mp3";
    rec = new Media(url, function(){});
    document.getElementById("stat").innerHTML = "録音中...";
    rec.startAudioRecord();
  }
  function stopRec(){
    rec.stopAudioRecord();
    document.getElementById("stat").innerHTML = "録音を終了しました";
  }
  function playRec(){
    rec.play();
    document.getElementById("stat").innerHTML = "再生中...";
  }
  function playStop(){
    rec.stop();
    document.getElementById("stat").innerHTML = "再生を停止しました";
  }
  </script>
 </head>
 <body>
   <h1>PhoneGapで録音</h1>
   <div>
    <a onclick="startRec()">録 音</a>
    <a onclick="stopRec()">録音停止</a>
    <a onclick="playRec()">再生</a>
    <a onclick="playStop()">再生停止</a>
   </div>
   <div id="stat"></div>
 </body>
</html>

この連載の記事

一覧へ

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