このページの本文へ

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

NimbleKitで自分だけのiPodアプリを作ろう

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

古籏一浩

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

 HTML/CSS+JavaScriptでiPhone/iPadアプリを開発できるNimbleKit。今回はNimbleKitの「NKAudioPlayer」クラスを使って、iPodのようなオーディオ再生アプリを作ってみましょう。NKAudioPlayerはそれほど多機能なものではありませんが、ボリュームコントロールや一時停止、繰り返し処理など、オーディオプレイヤーに必要な最低限の機能は備えています。

 NimbleKitでは、アプリ内にパッケージ化したオーディオファイルだけでなくインターネットに公開しているファイルも手軽に再生できますが、まずはアプリ内のオーディオファイルを再生する方法から説明しましょう。

オーディオファイルを指定して再生する

 NimbleKitはiPhone/iPad専用のフレームワークですので、iOSがサポートしているオーディオ形式であれば問題なく再生できます。iOSで再生できるメディアタイプはアップルのドキュメントに掲載されています。

 オーディオファイル部分だけを抜粋してまとめたのが以下の表です。

種類 拡張子
3GPP,3GPP2メディア 3gp, 3gpp, 3g2, 3gp2
AIFFオーディオ aiff, aif, aifc, cdda
AMRオーディオ amr
MP3オーディオ mp3, swa
MPEG-4メディア mp4
MPEGオーディオ mpeg, mpg, mp3, swa
WAVEオーディオ wav, bwf
AACオーディオ m4a
AACオーディオブック m4b, m4p

 再生したいオーディオファイルを用意したら、1つのフォルダにまとめておきます。今回はmusicフォルダとしました。

 次に、XcodeでNimbleKitの新規プロジェクトを作成し(関連記事)、プロジェクトウィンドウ内のResourcesフォルダにmusicフォルダをドラッグ&ドロップで追加します。

【図】1.png
【図】2.png
【図】3.png

 NimbleKitではNKAudioPlayerクラスを使ってオーディオを再生します。newでNKAudioPlayerオブジェクトを生成します。

var player = new NKAudioPlayer();

 再生するオーディオファイルをloadFile()で指定します。引数にファイルのパスを指定します。

player.loadFile("music/Pop1.mp3");

 これで準備完了です。オーディオファイルを再生するには以下のようにplay()メソッドを使います。

player.play();

 ここまでをまとめたのがサンプル1です。playボタンをクリックするとアプリケーション内にあるPop1.mp3ファイルが再生されます。

【図】4-2.png

■サンプル1[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>
  <input type="button" value="Play" id="playButton">
</form>
<script>
  var player = new NKAudioPlayer();
  player.loadFile("music/Pop1.mp3");
  document.getElementById("playButton").onclick = function(){
    player.play();
  }
</script>
</body>
</html>
Web Professionalトップページバナー

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

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

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