サウンドを再生する

次に、アプリケーションにミュージックとバックグラウンドミュージックを追加してみましょう。

アセットのアップロード

「Androidアプリ設定」 > 「アセット管理」の画面でバックグラウンドミュージックに使用するためのoggファイルをアップロードします。今回は、bgm1.ogg(iOSの場合はbgm1.m4a)というファイルをアップロードします。
アップロードが完了したら、そのファイルをバックグラウンドミュージックと使用するために、「ogg Music」にしておきます。

サウンドエフェクトには、デフォルトで用意されている select.ogg(iOSの場合はselect.m4a)を今回は利用します。

JavaScriptを利用してミュージックを再生する

以下のように、index.htmlにサウンドを再生するコードを書いてみます。

このコードは Android向けに .ogg ファイルを再生しています。iOSの場合は、.m4a ファイルを指定します。

Shell App Framework のクライアントがページをロードした後に、mobage.shellapp オブジェクトが利用可能になったタイミングで、onShellAppReady というイベントが発生しますので、そのイベントハンドラーの中にミュージックの再生処理を記載します。通常、onShellAppReady イベントは onLoad の後に呼ばれます。

第一引数に、先ほどアップロードした bgm1.ogg(iOSの場合はbgm1.m4a)を指定し、第二引数には次のミュージックが再生される際のフェード時間を 1 秒と指定、第三引数には無限ループ再生を示すための -1 を指定しています。
 

次に、各リンクがクリックされた際のクリック音として、select.ogg(iOSの場合はselect.m4a)を onclick イベントで再生するようにします。

他のリンクも同様に onclick イベントで select.ogg(iOSの場合はselect.m4a)を再生するようにします。

アプリケーションの再ダウンロード

今回のチュートリアルでは、新たに bgm1.ogg(iOSの場合はbgm1.m4a)というファイルをアップロードして追加したために、クライアントアプリケーションの再ダウンロードが必要になります。「Download」タブからパッケージングされたアプリケーションを再度ダウンロードし、端末に再インストールします。

動作確認

再インストールしたアプリケーションを起動して、ミュージックが再生されることを確認してください。また、index.html の各リンクをクリックした際にクリック音がなることを確認してください。

以上で、 サウンドを再生するチュートリアルは完了です。

参考資料

JavaScriptのmobage.shellapp.Musicの詳細はこちらを参照してください。
JavaScriptのmobage.shellapp.SoundEffectの詳細はこちらを参照してください。
 

更新履歴

  • 2012/12/11
    • 新規作成

PREVIOUS

Remote Notificationを送信する

NEXT

友達とチャットする