このページの本文へ

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

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

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

古籏一浩

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

PhoneGapプロジェクトの作成

 最初に、HTML5 Audioを使って音楽を再生するアプリを作成します。Xcodeを起動し、これまでと同様の手順でPhoneGapプロジェクトを作成します。

【図】1.png
ファイルメニューから「新規プロジェクト...」を選択
【図】2.png
PhoneGap-based Applicationを選択し、「選択...」ボタンをクリック
【図】3.png
作成するプロジェクト名を入力し保存

 新規プロジェクトを作成したら、Pop1~3.mp3までの3曲が入っているmusicフォルダをwwwフォルダにドラッグ&ドロップします。

【図】4.psd
曲ファイルをwwwフォルダに入れる
【図】5.png
プロジェクトウィンドウでwwwフォルダ内に音楽ファイルが入っているのを確認する

HTML5 Audioでの演奏

 HTML5で音楽(オーディオ)を演奏するには、new Audio()の引数に再生したいファイルのURLを指定します。たとえば以下のようにすると、index.htmlファイルと同じ階層にあるPop1.mp3を演奏します。


(new Audio("Pop1.mp3")).play()

 このような指定方法はPhoneGapでも変わりません。今回はwwwフォルダ内のmusicフォルダ内に音楽ファイルがありますから、以下のように指定すればよさそうです。


(new Audio("music/Pop1.mp3")).play()

 ところが、PhoneGapでは基準となるパスがデフォルトではwwwフォルダになっていないので、これでは再生できません。そこで、以下のようにして現在のアプリの基準パスを求めます。


var basePath = String(location);
var path = basePath.substr(0, basePath.lastIndexOf("/"));

 その後、再生したいファイルのパスを指定します。


var url = path+"music/"+filename;

 これでwww/musicフォルダ内にある音楽ファイルを再生できます。実際のプログラムは以下のようになります。

【図】6.png
HTML5 Audioを使って演奏するプログラム

■サンプル1


<!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">
  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 basePath = String(location);
        var path = basePath.substr(0, basePath.lastIndexOf("/"));
        var url = path+"music/"+filename;
        (new Audio(url)).play();
      }
    }
  }
  </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>

HTML5のカスタムデータ属性を使う

 HTML5ではHTML要素に独自の属性を追加する「カスタムデータ属性」が利用できます。カスタムデータ属性はdata-で始まるルールがあり、data-の後には好きな属性名が付けられます。

 サンプル1ではli要素にカスタムデータ属性「data-name」を設定し、再生する音楽ファイル名を指定しています。本来は、datasetでカスタムデータ属性を読み出せるはずですが、PhoneGapではうまくいかないようです(iOSやPhoneGapのバージョンによって異なる可能性があります)。サンプル1では、属性値を読み出すgetAttribute()メソッドを使ってカスタムデータ属性の値を読み込んでいます。

Web Professionalトップページバナー

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

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

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