シミュレーターと実機での確認
サンプルの動作を確認しましょう。まずはiOSシミュレーターで動作するか確認します。iPhone、iPadのどちらで確認しても構いません。リスト項目をクリックして音楽が再生されたら成功です。
項目をクリックすると音楽が演奏される
次に、実機で動作確認しましょう。実機とMacをUSBケーブルで接続し、プロジェクトメニューから「Device」を選択してプロジェクトウィンドウの「ビルドと実行」ボタンをクリックします。しばらくするとアプリが実機に転送されます。
アプリが起動したら項目をタップしてみましょう。タイムラグが少しありますが、音楽が再生されるはずです。
実機で動作を確認する
PhoneGapのMedia APIを使う
HTML5 Audioを使うと、同時に他の音楽ファイルを再生できません。同時に再生させたい場合は、PhoneGapに用意されているMedia APIを利用します。
- PhoneGap Media API
- http://docs.phonegap.com/phonegap_media_media.md.html
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>
