Embedding local or remote MP3 audio in Symbian Web Runtime

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Created: Maveric (28 Oct 2010)
Last edited: hamishwillee (23 Jul 2012)

Under construction.



The purpose of this Wiki article is to demonstrate how you can play sounds in a Symbian WRT widget using embedded Flash object.


  • any code editor of your choice.
  • a supported device for testing, N8 used in this example.

Example code

This example code shows how to embed a MP3 file, locally or remotely from a server to be played within your S60 WRT widget. We will create a method that can be called when the MP3 file needs to be embedded. Therefore an additional JavaScript file will be created.

basic.js - code for WRT default JavaScript file

audioplay.js - serves as home for the Mp3 embed method.

var songname = "";
var songURL = "";
function embedMP3(songname, songURL) {
var objectType = "application/x-mplayer2";
document.writeln("<strong style='font-size:18px; position:relative; top:-28px'>" + songname + "&nbsp;</strong>");
document.writeln("<object width='200' height='80'>");
document.writeln("<param name='type' value='" + objectType + "'>");
document.writeln("<param name='src' value='" + songURL + "'>");
document.writeln("<param name='autostart' value='0'>");
document.writeln("<param name='showcontrols' value='1'>");
document.writeln("<param name='showstatusbar' value='1'>");
document.writeln("<embed src ='" + songURL + "' type='" + objectType + "' autoplay='false' autostart='0' width='280' height='69' controller='1' showstatusbar='1' bgcolor='#ffffff'></embed>");

index.html - code for WRT default HTML-file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Mp3 audio play test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="basic.js"></script>
<script src="audioplay.js" type="text/javascript"></script>
<link rel="stylesheet" href="basic.css" type="text/css" />
<meta name="Generator" content="Nokia WDE 3.0.0" />
<body onload="init();">


In the CSS file basic.js will be simply defined a background-color and text alignment to the middle of the widget.

body {
background-color: #6C5635;
text-align: center;

Media file and link for testing



This page was last modified on 23 July 2012, at 06:34.
35 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.