PhoneGapプロジェクトの作成
最初に、HTML5 Audioを使って音楽を再生するアプリを作成します。Xcodeを起動し、これまでと同様の手順でPhoneGapプロジェクトを作成します。
新規プロジェクトを作成したら、Pop1~3.mp3までの3曲が入っているmusicフォルダを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フォルダ内にある音楽ファイルを再生できます。実際のプログラムは以下のようになります。
■サンプル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()メソッドを使ってカスタムデータ属性の値を読み込んでいます。