Music player issues

[inputfield]

I'm trying to develop an application that allows downloading and playing audio files.
When the internal audio player is launched and closed, nokia browser doesn't function properly. (for example, you can't send a xml message to server via javascript)
Is there any way to get any kind of debug or error log from the device?

Also images start to disappear from the page, when I modify the DOM dynamically via javascript.
Is this a bug in the framework?
Thanks in advance

[isalento]

Hi and welcome to forum!

The only way to get debug and error messages from the device is to use remote logging service of some sort.
In the simplest way it would be to send log messages to your own server using XMLHttpRequest. Unfortunately there is no built in support for remote logging in the platform.

What device and browser version are you using? That information would help us to reproduce the problem you are experiencing.

Br,
Ilkka

[igordsm]

inputfield,

I had some issues with DOM manipulation using the innerHTML. Basically, the code below gives the wrong results, even though it seems right.

element.innerHTML = "<div>"
element.innerHTML += "CONTENT"
element.innerHTML += "</div>"

The problem was that the expression was evaluated at the assignment and the browser didn't accept an unclosed div element. Changing the assignment to one line fixed my problems.

[inputfield]

Hi,
thanks for your replies, Ilkka and Igor.
I'm using asha 305 with browser version 2.0.2.68.13
I did a "onscreen logger" to see what was going on, but it seems that javascript executed remotely doesn't function after you access the downloads page and music player ( and return from them ).
I think one of the major issues in webapps is that all of the debuggers (remote, local, device) behave so differently.

[inputfield]

Here's a bit more in detail the kind of issues I'm having:
1. User navigates to a link that contains an audio file in the server. User downloads this to his device and uses the audio player to listen the file. When the user returns to the application, javascripts that are executed in the cloud(nokia servers) no longer works. Javascript executed in the device (mwl) still functions.
2. User navigates the the menus (different content gets hidden and shown) for some time. Most of the content is dynamic in the server, so menus and content are created dynamically via javascript. After some time navigating, suddenly pictures start to disappear (like menu background or title background, but mainly pictures from the main menu). Main menu contains big images inside a table functioning as a carousel (see the example in the sdk for the carousel). I guess the device swaps off the pictures from the memory, but never returns them correctly. I've tried to reduce the quality and size of the images, but the same problem persists.

I have no idea of what to do with these problems, as I have no means to debug the devices.

[isalento]

Thanks for the details, I tried to reproduce the problem but haven't succeeded yet.

Have you noticed if there is a difference on what size of audio file you are downloading?
I tried with 4MB MP3 file and it took a while to download it and then I got the "Page Expried - Reloaded automatically" note when returning to Web App.
Do you see this note or does the web app just stop responding to JavaScript calls?

Br,
Ilkka

[inputfield]

Audio is .arm files usually around 100-200KB.
The issue is definetly not with with the page expiry.
I'll test this bug with a simplier code today.
Note that this error only appears in the phone, not in emulators.

Here's the script I use to create the link for the file in the web app, link of the audio is saved in input element's id.

var linknode = document.createElement("input");
linknode.setAttribute("type", "button");
linknode.setAttribute("class", "ui-button");
linknode.setAttribute("value",STRINGS.COMMAND_LISTEN);
linknode.setAttribute("id",text[0]);
linknode.onclick=function(e){mwl.loadURL(e.target.getAttribute("id"));};
container.appendChild(textnode);
container.appendChild(linknode);

[inputfield]

Ok, so here is the sample code that produces the error.
Try to press TEST button before and after downloading the mp3.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>linktest</title>
<link href="s40-theme/css/s40-theme.css" rel="stylesheet"
type="text/css" />
<script language="javascript" type="text/javascript"
src="s40-theme/js/screensize.js"></script>
<script type="text/javascript">
function createLink() {
var container = document.getElementById("container");
var linknode = document.createElement("input");
linknode.setAttribute("type", "button");
linknode.setAttribute("value", "LISTEN");
linknode.setAttribute("id",
"http://tonycuffe.com/mp3/tailtoddle_lo.mp3");
linknode.onclick = function(e) {
mwl.loadURL(e.target.getAttribute("id"));
};
container.appendChild(linknode);
}
function doServerCall() {
document.getElementById("content").appendChild(
document.createTextNode("WORKS"));
}
</script>

</head>

<body onload="createLink()">
<div class="ui-page">
<!-- header -->
<div class="ui-header">
<div class="ui-title inline">
<h2>linktest</h2>
</div>
<div class="refresh-icon inline">
<a onclick="refreshPageContent();"><img alt="icon"
src="s40-theme/images/refresh_40x40.png" /> </a>
</div>
</div>
<div id="content" class="ui-content">LINK TEST</div>
<div id="container"></div>
<input type="button" value="TEST" onclick="doServerCall()"></input>
</div>
</body>
</html>

[isalento]

Now I can see the error you are talking about and reporting it to RND.

It has to have something to do with the onclick part. When using this code, the browser actually prompts you to download "content type:text/xml" instead of MP3 file.
After this prompt is shown Web App stops behaving correctly.

linknode.onclick = function(e) {
mwl.loadURL(e.target.getAttribute("id"));
};

As a workaround please try to use inline onclick handlers.

linknode.setAttribute("onclick", "mwl.loadURL('http://tonycuffe.com/mp3/tailtoddle_lo.mp3');");

//or if you use anchor tag instead of button
linknode.setAttribute("href", "http://tonycuffe.com/mp3/tailtoddle_lo.mp3");

PS.
I don't think that URL is proper value for element ID, at least not before HTML5

Br,
Ilkka