Adding sound to your HTML5 games for Intel® Architecture-based Android* devices

Introduction

Sound is one of the most significant components for building interactive games. A game requires not only a high calibre of graphics and alluring story line, but also sound impacts to awe the players. Adding sound effects to your game/application not only enhances its entertainment value, but also contributes to the application’s/game's general cachet of quality.

Audio Tag

Some of the new captivating characteristics of HTML5 are the sound and video tags. These could conceivably, in the long term, replace some of today’s popular video technologies. To use HTML5 audio or video, start by creating an <audio> element, specifying a source URL for the audio, including the controls attribute.

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> 

The control trait includes sound controls, for example, play, stop, and volume. The <audio>component permits different <source> components. <source> components can connect to diverse <audio> records. MIME types (also known as Internet Media Types) are a way of characterizing file formats so that your framework knows how to grip them. Along with the source, we specify a type attribute. This attribute tells the program the MIME sort and the codecs of the supplied media before it downloads them. If the attribute is not provided, the browser will use an experimental approach to try and recognize the media type. The browser will utilize the initially distinguished configuration, and if it does not recognize the format,it plays the default one.

canPlayType Method

Luckily, the sound API furnishes a way for us to discover if a certain format is supported by the mobile browser. We can grab the <audio> element by marking up our element in HTML as below:

	
var audio = document.getElementById('myaudio');

Otherwise, we can also generate our element completely in JavaScript*:

var audio = new Audio();

When we have our sound component, we are primed to enter its methods and properties. To test the format support, we can utilize the canplaytype technique, which takes a MIME type as a parameter:

	
audio.canPlayType('audio/mpeg’);

canPlayType yields one of three values:

1. probably
2. maybe
3. “” (the empty string)

The explanation for why we have these odd return types is due to the general abnormality encompassing codecs. The mobile browser can figure if a codec is playable without attempting to play it.

MIME Types for Audio Formats

Attributes

HTML tags are composed of one or more attributes/characteristics. Attributes are added back to a tag to furnish the browser with additional data about how the tag may show up or behave. Characteristics are composed of a name and a value differentiated by an equivalent (=) sign, with the value encompassed by double quotes. Here's an example, style "color: blue";

The following section briefly describes the attributes that are particular to the <audio> tag/element.

src: States the location of the audio file. Its value must be the URL of an audio file.preload: While playing large files, it is best to buffer records. To do this, use the preload attribute. This attribute permits us to offer a hint to the browser that we intend to buffer the record before playing itand accelerate the best client experience. Possible values are:

• none
• metadata
• auto

autoplay:

States whether or not to start playing the audio as soon as the object has loaded.

This is a boolean attribute. Accordingly, the presence of this attribute equates to a true value. We can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e., either autoplay or autoplay="autoplay").

Possible values:

• [Empty string]
• autoplay

mediagroup:

This attribute is used for synchronizing playback of audio files (or media elements). It allows us to specify media elements to link together. The value is a string of text, for example: mediagroup=album. Audio files/media elements with the same value are automatically linked by the user agent/browser.

A case of where the mediagroup quality could be utilized is when you have to overlay a sign-language translator track from one video over the top of the other.

loop:

This attribute states whether to keep replaying the audio once it has finished.

This attribute has a boolean attribute. Accordingly, the presence of this attribute equates to a true value. We can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e., either loop or loop="loop").

Possible values:

• [Empty string]
• loop

controls:

Instead of playing sounds automatically, which is not a good practice, you might as well let the browser present a few controls, for example volume and a play/pause bind. This might be carried out effectively by adding the controls attribute to the tag.

This attribute has a boolean attribute. Accordingly, the presence of this attribute equates to a true value. We can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e., either controls or controls="controls").

Possible values:

• [Empty string]
• controls

Controlling media playback

Once we have inserted the media into our HTML document utilizing the new components, we can automatically control them from JavaScript code. For instance, to begin (or restart) playback, we can do:

	
var v = document.getElementsByTagName(“myaudio”);
v.play();

The first line gets the first audio component in the archive, and the second calls the component's play strategy, used to actualize the media components. Regulating an HTML5 sound player to play, stop, increase, and decrease the volume with some JavaScript code is straightforward:

	
document.getElementById('demo').play() //Play the Audio
document.getElementById('demo').pause() //Pause the Audio
document.getElementById('demo').volume+=0.1 // Increase Volume document.getElementById('demo').volume-=0.1 // Decrease Volume

Seeking through media

Media components give support for moving the present playback position to particular focuses in the media's content. This is done by setting the value of the currenttime property on the component. Essentially, set the time to the number of seconds that you want the playback to proceed.

We can utilize the component's seekable property to obtain the starting and ending time of the media. This returns a TimeRanges object, listing the ranges of times that you can seek to.

	
var audioElement = document.getElementById(“myaudio”);
audioElement.seekable.start();  // Returns the starting time (in seconds)
audioElement.seekable.end();    // Returns the ending time (in seconds)
audioElement.currentTime = 122; // Seek to 122 seconds
audioElement.played.end();      // Returns the number of seconds the browser has played

SimpleGame library

The simpleGame library makes it very easy to build new sounds by adding a Sound object. The Sound object in the simpleGame library is based on the HTML5 <sound> tag.

<script type="text/javascript"
   src = "simpleGame.js"></script>
 <script type="text/javascript">

You can easily manage the sound effects with the simpleGame library:

1. Create the sound effect. The best formats are mp3 and ogg.
2. Create a variable for holding your sound effect. Make sure to define the variable outside the function.
3. The SimpleGame library has a Sound object. Create an instance of this for building your sound. The sound object requires a parameter. You can set the parameter in the init function.
4. The sound can be played with the sound object’s play() method.

Direct Canvas from AppMobi

To supplement their HTML5 competencies, developers may want to explore the development tools and environment from AppMobi to build robust applications. The App Game Interface (AGI) technology by AppMobi provides hybrid HTML5 applications the capability to accelerate their canvas tag commands. The AGI technology was developed by AppMobi (http://www.appmobi.com), an HTML5 services company, initially known as directCanvas.

To use the AGI, we must first understand how it is fabricated. The AGI accelerated canvas command needs to be stacked into its own "perspective" not unlike an HTML outline, where these summons are translated at a higher level and executed at a faster pace. Then again, this divided view does not incorporate access to the full archive object model (DOM), and should depend on a spanning charge to pass information between the standard Web view and the accelerated view.

The code for the accelerated "perspective" is drawn underneath the HTML5 Web view, which implies that any graphical components incorporated in an AGI API provision's HTML document or documents will dependably be rendered above any accelerated graphics.

Using the AGI sound features

The App Game Interface (AGI) technology has illuminated many HTML5 sound weaknesses with multi-sound upgrades. HTML5 was not intended to play different offbeat sounds with low latency, yet that is precisely what games and different applications are in dire need of. The AGI multi-sound innovation permits every element in a game to play sound when it ought to, without respect to any possible simultaneous sounds. AppMobi APIs are all accessible through the Appmobi.context object and are intended to furnish enhanced execution and expanded usability.

Three strategies can be utilized to control a solitary background sound:

startBackgroundSound:

This method begins a sound that plays continuosly in the background.

A sole background sound may be sustained by the Accelerated Canvas App Game Interface. Use this method to begin a background sound or music. This command is included in addition to the Audio object to deliver enhanced performance and augmented ease of use.

Syntax

	
AppMobi.context.startBackgroundSound("sounds/music_main.mp3",true)

The first parameter is the path and filename of the background sound to play, while the second parameter is an optional boolean value signifying whether this background sound should recap intermittently or not.

toggleBackgroundSound

Use this command to toggle a background sound on or off. A sole background sound may be sustained by the Accelerated Canvas App Game Interface. Use this method to toggle a background sound or music. This command is included in addition to the Audio object to deliver enhanced performance and augmented ease of use.

Syntax

	
AppMobi.context.toggleBackgroundSound();

stopBackgroundSound

Use this command to stop the background sound. A sole background sound may be sustained by the Accelerated Canvas App Game Interface. Use this method to stop a background sound or music. This command is included in addition to the Audio object to deliver enhanced performance and augmented ease of use.

Syntax

	
AppMobi.context.stopBackgroundSound()

Conclusion

Despite some unpredictable browser behavior, HTML5 is an exhilarating technology for creating new and powerful applications. In this article, we have studied how to incorporate sound into our applications with the HTML5 audio component and looked at the AGI technology from AppMobi that provides additional tools for developing wonderful applications. We could combine other technologies/tools like JavaScript, phonegap, appmobi, etc. with HTML5 to unlock more opportunities to write applications that normally would require native code.

More resources

Some interesting demos of using sound in HTML5:

http://www.createjs.com/#!/SoundJS/demos/visualizer

http://www.createjs.com/#!/SoundJS/demos/game

http://www.createjs.com/#!/SoundJS/demos/explosion

Intel and the Intel logo are trademarks of Intel Corporation in the U.S. and/or other countries.

Copyright © 2013 Intel Corporation. All rights reserved.

*Other names and brands may be claimed as the property of others.