このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第72回

PhoneGapのMedia APIでバイブ付き音楽プレーヤー

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

古籏一浩

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

シミュレーターと実機での確認

 サンプルの動作を確認しましょう。まずはiOSシミュレーターで動作するか確認します。iPhone、iPadのどちらで確認しても構いません。リスト項目をクリックして音楽が再生されたら成功です。

【図】7.png
項目をクリックすると音楽が演奏される

 次に、実機で動作確認しましょう。実機とMacをUSBケーブルで接続し、プロジェクトメニューから「Device」を選択してプロジェクトウィンドウの「ビルドと実行」ボタンをクリックします。しばらくするとアプリが実機に転送されます。

 アプリが起動したら項目をタップしてみましょう。タイムラグが少しありますが、音楽が再生されるはずです。

【図】8.png
実機で動作を確認する

PhoneGapのMedia APIを使う

 HTML5 Audioを使うと、同時に他の音楽ファイルを再生できません。同時に再生させたい場合は、PhoneGapに用意されているMedia APIを利用します。

 Media APIは以下のような書式で利用します。

●書式


var media = new Media(src, mediaSuccess, [mediaError])

 srcは再生する音楽ファイルのURL、mediaSuccessは再生が終了したときに呼び出される関数です。3番目の引数mediaErrorはエラーが発生したときに呼び出される関数で、省略できます。

 new Media()でメディアオブジェクトを生成したら、HTML5 Audioと同様に、play()メソッドで再生します。ただし、Media()で指定するURLは、HTML5 Audioとは基準となるパスが異なります。HTML5 Audioでは実行されているアプリのパスを求める必要がありましたが、Media()ではwwwフォルダがデフォルトのパスになるので、以下のように指定します。


var url = "music/"+filename;

 実際のプログラムは以下のようになります。Media APIはiOSシミュレーターと実機とで動作が異なる場合がありますので、実機で確認してください。


<!DOCTYPE HTML>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
  <meta charset="utf-8">
  <style type="text/css">
    ol { display: none; }
    li { background-color: #ddd; border-bottom:1px solid black; height: 40px; }
  </style>
  <script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.1.min.js"></script>
  <script type="text/javascript" charset="utf-8">
  var audioObj = null;
  function onBodyLoad()
  { 
    document.addEventListener("deviceready",onDeviceReady,false);
  }
  function onDeviceReady()
  {
    document.getElementsByTagName("ol")[0].style.display = "block";
    var list = document.getElementsByTagName("li");
    for(var i=0; i<list.length; i++){
      list[i].onclick = function(){
        var filename = this.getAttribute("data-name");
        var url = "music/"+filename;
        audioObj = new Media(url, endMusic, errorMusic);
        audioObj.play();
      }
    }
  }
  function endMusic(){
    alert("演奏が終了しました");
  }
  function errorMusic(e){
    alert("エラーが発生しました:"+e);
  }
  </script>
 </head>
 <body onload="onBodyLoad()">
  <h1>曲を選択</h1>
  <ol>
    <li data-name="Pop1.mp3">音楽その1</li>
    <li data-name="Pop2.mp3">音楽その2</li>
    <li data-name="Pop3.mp3">音楽その3</li>
  </ol>
 </body>
</html>
Web Professionalトップページバナー

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

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

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