Next, let's try to add music and background music to an application.

Uploading an Asset

On The Mobage Developer Site, click ""MyFirstShellApp" > "Android " > "Asset" to upload a sound file to use for background music. For this tutorial, upload the file named bgm1.ogg.

After the file has been uploaded, place it in "Music" since this file will be used for background music.

For sound effects, use select.ogg , which is provided by default.

Using JavaScript to Play Music

Write the following HTML code in index.html in order to play sound.

This code, which is intended for an Android device, plays an .ogg file. For iOS, specify an .m4a file.

After the Shell App Framework client loads a page and the mobage.shellap object becomes available, the onShellAppReady event will be generated. Consequently, you should provide code to handle music playback within its event handler. Normally, the onShellAppReady event is called after onLoad.

For the first argument, specify bgm1.ogg , which is the file you uploaded earlier. For the second argument, specify 1 as the fade time in seconds when the next music will be played, and for the third argument, specify -1 to indicate that playback should be looped indefinitely.

Then, when a link is clicked and an onclick event occurs, select.ogg will be played to produce the click sound.

Similarly, select.ogg will be played when another link is also clicked and an onclick event occurs.

Re-downloading an Application

In this tutorial, a new file bgm1.ogg (bgm1.m4a for iOS) was uploaded and added so you will need to re-download the client application. Download the packaged application again from the "Download" tab and reinstall it on the mobile device.

Verifying Operation

Launch the re-installed application and verify that music plays correctly. Also, verify that the click sound occurs when each link in index.html is clicked.

This completes the tutorial for playing sound.

Reference Material

For more information about the JavaScript mobage.shellapp.Music, please see here.
For more information about the JavaScript mobage.shellapp.SoundEffect, please see here.

Revision History

• 12/11/2012
  • Initial release