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

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

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

古籏一浩

ツイートする

バイブレーション機能を追加する

　せっかくPhoneGapを利用するのですから、Webブラウザーだけではできない機能も試してみましょう。バイブレーション機能を使って、音楽の再生が始まる前にiPhoneを振動させる機能を付けてみます。

　バイブレーション機能は以下のようにして利用します。vibrate()の引数には振動させる時間をミリ秒で指定します（ただし、実際にはiPhoneでは秒数は反映されないようです）。


navigator.notification.vibrate(3000);

　次に、アプリ内にある音楽ファイルではなく、インターネット上に公開されている音楽ファイルを再生するように変更します。以下のURLにある音楽ファイルを利用します。

音楽ファイルがあるURL: http://www.openspc2.org/music/asc/

　Mediaのsrcにはインターネット上のファイルも指定できるので、以下のようにすると音楽ファイルのURLを求められます。


var url = "http://www.openspc2.org/music/asc/"+filename;

　Mediaは作成したオブジェクトの数だけ音楽を演奏してします。ゲームの効果音ならまだしも、複数の音楽が同時に演奏されてしまうと聞き苦しくなりますので、以下のようにstop()メソッドを使って再生中の音楽を停止させます。何らかの影響で停止してしまうのを防ぐため、try...catchを使ってエラーを回避します。


try{
  audioObj.stop();
}catch(e){}

　実際のプログラムは以下のようになります。バイブレーション機能は実機でしか確認できませんので、アプリを実機に転送して確認します。項目をタップするとiPhoneが振動し、その後音楽が演奏されれば成功です。


実際のプログラム


項目をタップすると振動する

■サンプル3


<!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(){
        navigator.notification.vibrate(3000);
        var filename = this.getAttribute("data-name");
        var url = "http://www.openspc2.org/music/asc/"+filename;
        try{
          audioObj.stop();
        }catch(e){}
        audioObj = new Media(url, endMusic, errorMusic);
        audioObj.play();
      }
    }
  }
  function endMusic(){
    alert("演奏が終了しました");
  }
  function errorMusic(e){
    alert("エラーが発生しました："+e);
  }
  </script>
 </head>
 <body onload="onBodyLoad()">
  <h1>曲を選択(net)</h1>
  <ol>
    <li data-name="music1.mp3">音楽その1</li>
    <li data-name="music2.mp3">音楽その2</li>
    <li data-name="music3.mp3">音楽その3</li>
    <li data-name="music4.mp3">音楽その4</li>
    <li data-name="music5.mp3">音楽その5</li>
  </ol>
 </body>
</html>

PhoneGapに用意されたアラートを使う

　サンプル3を実行して音楽の再生が終了すると、以下のようなダイアログが表示されます。


演奏が終了するとダイアログが表示される

　このダイアログはJavaScriptに標準で用意されているalert()を使っているので、よく見ると「index.html」という文字が表示されています。最終的にアプリとして配布するプログラムに、実行しているファイル名が表示されてしまうのはよくありません。

　PhoneGapには独自のダイアログを表示するためのAPIが用意されています。

Notification API: http://docs.phonegap.com/phonegap_notification_notification.md.html

　アラートダイアログはnavigator.notification.alert()を使って表示できます。navigator.notification.alert()の書式は以下のようになっており、alert()とは違って複数の引数があります。

●書式


navigator.notification.alert(message, alertCallback, [title], [buttonName])

　最初の引数はダイアログに表示するメッセージ、2番目はダイアログが閉じられたときに呼び出される関数、3番目はダイアログに表示するタイトルです。alert()ではタイトルがファイル名になりますが、navigator.notification.alert()であれば任意の文字列を表示できます。最後の引数はボタン名です。デフォルトでは「OK」の文字になっています。

　ここまでをまとめたのが以下のプログラムになります。


完成したプログラム

■サンプル4


<!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;
  var playFlag = false;
  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(){
        if (playFlag){
          audioObj.stop();
          playFlag = false;
          return;
        }
        playFlag = true;
        navigator.notification.vibrate(3000);
        var filename = this.getAttribute("data-name");
        var url = "http://www.openspc2.org/music/asc/"+filename;
        try{
          audioObj.stop();
        }catch(e){}
        audioObj = new Media(url, endMusic, errorMusic);
        audioObj.play();
      }
    }
  }
  function endMusic(){
    navigator.notification.alert("演奏が終了しました", function(){}, "お知らせ");
    playFlag = false;
  }
  function errorMusic(e){
    navigator.notification.alert("エラーが発生しました："+e, function(){}, "エラー");
    playFlag = false;
  }
  </script>
 </head>
 <body onload="onBodyLoad()">
  <h1>曲を選択(net v2)</h1>
  <ol>
    <li data-name="music1.mp3">音楽その1</li>
    <li data-name="music2.mp3">音楽その2</li>
    <li data-name="music3.mp3">音楽その3</li>
    <li data-name="music4.mp3">音楽その4</li>
    <li data-name="music5.mp3">音楽その5</li>
  </ol>
 </body>
</html>