NimbleKitで自分だけのiPodアプリを作ろう (3/4)

2011年06月23日　11時00分更新

文●古籏一浩

ツイートする

システムボリュームスライダーで音量を調整できるようにする

　NimbleKitではシステムのオーディオボリュームを調整できます。といっても、スクリプトから直接システムのボリュームを設定したり読み出したりはできません。システムのボリュームを調整するスライダーを画面上に表示し、ユーザーの操作によってシステムのボリュームを調整できるだけです。

　システムボリュームを調整するスライダーは、NKSystemVolumeControl()クラスで表示します。newにより生成されたNKSystemVolumeControlオブジェクトには、init()メソッドだけが存在します。init()はシステムボリュームスライダーの位置と幅を指定するメソッドで、スライダーを動かすと自動的にシステムのボリュームが変化します。一度表示してしまえばプログラムとしては何もする必要はありません。

　システムボリュームスライダーを組み込んだのがサンプル3です。NimbleKitではHTMLとして表示した画面とシステムコントロールは別々に扱われるので、サンプル3ではページがタッチされたときに動かないようにpreventDefault()を使って画面を固定しています。

■サンプル3[HTML]

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
</head>
<body>
<form>
  <select id="musicNumber">
    <option value="music/Pop1.mp3">Pop1</option>
    <option value="music/Pop2.mp3">Pop2</option>
    <option value="music/Pop3.mp3">Pop3</option>
  </select>
  <br>
  <input type="checkbox" value="false" id="loopCheck">繰り返し再生<br>
  <input type="button" value="Play" id="playButton"><br>
  <input type="button" value="Stop" id="stopButton"><br>
</form>
<script>
  var player;
  player = new NKAudioPlayer();
  player.loadFile("music/Pop1.mp3");
  document.getElementById("musicNumber").onchange = function(){
    player.loadFile(this.value);
  }
  document.getElementById("loopCheck").onclick = function(){
    if(this.value){
      player.setLoopMode("yes");
    }else{
      player.setLoopMode("no");
    }
  }
  document.getElementById("playButton").onclick = function(){
    player.play();
  }
  document.getElementById("stopButton").onclick = function(){
    player.stop();
  }
  // デフォルトのイベントを禁止
  document.ontouchmove = function(evt){
    evt.preventDefault();
  }
  // システムのボリュームを調整するスライダーを追加
  var volumeSlider = new NKSystemVolumeControl();
  volumeSlider.init(10, 400, 300);
</script>
</body>
</html>