Audio in Symbian Web Runtime

Comments

(no comments yet)

Log in or Join to leave comments.

Article Metadata

---

Code Example

Source file: Media:audioExample.zip

---

Article

Created: rosti (01 Nov 2010)

Last edited: hamishwillee (19 Jul 2012)

There are two different approaches to add audio to your web apps on Symbian Web Runtime

HTML Embed

You can use HTML's embed tag to play audio. There are two main advantage of this technique.

1. It is very easy to use and it works without any existing dependencies
2. The solution is virtually invisible to the user, affecting none at all to the UI.

The concept is to insert audio file with an embed tag to the DOM source. If the autoplay attribute is set to true, the device will start playing the sample when the embed tag is added.

Removing the embed tag from the DOM source will stop the audio.

Pros:

• Simple
• No external libraries or players needed

Cons:

• May have some delay before the audio starts to play (reads the file every time)
• Not possible to pause or get any info on progress

Sample code

The init function should be called from body's onload event

var src = "sample.mp3";
var playerId = null;
var embedString = '';
 
function init() {
   // Get DOM elements
   playerId = document.getElementById('player');	
 
   // Define embed tag with attributes
   embedString = '<embed src="' + src + '" ' +
     'type="audio/mp3" ' +      // Media mime type
     'width="0" height="0" ' +  // Size
     'hidden="true" ' +         // Visibility
     'autostart="true" ' +      // Autostart
     'loop="true" ' +           // Looping
     '/>';
 
   // Init status		
   stop();
}

The play function inserts the embed to the DOM tree, and starts the playback

 
function play() {
   // Add the embed string to DOM tree
   if(playerId) playerId.innerHTML = embedString;
}

The stop function removes the embed from the DOM tree, thus stopping the playback

 
function stop() {
   // Remove the embed string from DOM tree
   if(playerId) playerId.innerHTML = "";
}

Download complete example: File:AudioExample.zip (Rename to wgz to install on device)

Flash player

Flash Lite gives a better access to audio, but requires a separate file to be coded and built. With Flash Lite, you can control the audio file from loading to play status. By attaching your audio files inside the package, the loading delays can be kept minimum i.e. for sound effects use.

The concept of this approach is to use Flash player for playback, and use ExternalInterface to enable audio control directly from JavaScript. Thus the Flash player can be invisible to the user, and controls can be created in JavaScript/HTML like the rest of the UI.

Pros:

• Great access to audio control
• Fast playback

Cons:

• The player needs to be built, coded and maintained separately

Additional info

• Using the externalInterface class of Flash in WRT
• Reading ID3 tags of MP3 files in Flash Lite

Example: jQuery jPlayer

jPlayer is an audio player developed as a jQuery plugin, and makes a great example of existing solutions to add audio to the web content. The jPlayer plugin is well documented, and uses Flash player to play the audio.

jPlayer works with the latest Nokia devices, like N8. The source code and the player can be downloaded from jPlayer site in [here].