Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Audio in Symbian Web Runtime

From Wiki
Jump to: navigation, search
Article Metadata
Code ExampleArticle
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

Contents

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

Embed-audio-s60wrt.png

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

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].

This page was last modified on 19 July 2012, at 06:48.
62 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×