Javascript Error Loading MP3

Some users are getting a Javascript error:

JavaScript Error: Error: Could not execute returned javascript: Cannot read property 'setAttribute' of undefined
Source: 
S1 = document.createElement('audio');S1.setAttribute('src','http://mydomain.com/MP3/S1.mp3');S1.volume=1;
S2 = document.createElement('audio');S2.setAttribute('src','http://mydomain.com/MP3/S2.mp3');S2.volume=1;
S3 = document.createElement('audio');S3.setAttribute('src','http://mydomain.com/MP3/S3.mp3');S3.volume=1;
S1.play();

I suspect that the S1.play command is initiated before the audio file is downloaded but I can’t explain why the error occurs for createElement. The error is difficult for me to troubleshoot because I cannot replicate the error from my location (I have 20 Mbps up/down and 12 ms ping).

Any ideas?

This particular user was using following:

Windows 10
Edge Browser
Comcast ISP
1 Mbps download
3 Mbps upload
14 ms ping

I just finished testing using the same conditions. I have a Windows 10 computer and I used Edge browser. I set the speeds to match those of my user using NetBalancer.

Still can’t get any errors. It’s very laggy but it does work.

Doesn’t this suggest that the cause is the user’s machine? If so, where can I look? Maybe the browser cache is corrupted? Just looking for some ideas about where to look.

Well, it’s possible that CreateElement is returning “undefined”. That would explain the error.

What I am trying to figure out is why this error only happens for some users (maybe 5%). Most users don’t get this error.

If you need more information please let me know.

Any ideas for what to test (besides the obvious one of taking out the lines that load and play the audio)?

For the createElement, I am wondering if the nodename (in this case, ‘audio’) needs to be different for each audio file loaded?

Is a load command needed?

The error is that when you try to set the attribute, your element is undefined. In other words, it does not exist. Looks like creating the element takes too long for your code. Maybe Edge JavaScript engine is too slow on some machines.

I would try setting attributes and play in a setTimeout a few milliseconds later. Something like that :

Var S1 = document.createElement('audio'); Var S2 = document.createElement('audio'); Var S3 = document.createElement('audio'); setTimeout(function(){ S1.setAttribute('src','http://mydomain.com/MP3/S1.mp3');S1.volume=1; S2.setAttribute('src','http://mydomain.com/MP3/S2.mp3');S2.volume=1; S3.setAttribute('src','http://mydomain.com/MP3/S3.mp3');S3.volume=1; S1.play(); }, 100);

It should not make any difference for fast machines, but it may solve your issue on slower ones.

Michel, I think you are on the right track. I didn’t ask about computer because I assumed it was good hardware if it runs Windows 10. I will ask for his computer specs.

I just asked user to try using browserstack.com and if that works I think it points directly to hardware.

In any case, thanks for the suggestion. Makes sense. However, I suspect that if this does fix it, the cause is general slowing. There are many places that load audio just like the example here that caused crash. Still could be a hardware issue but rather than adding delays everywhere I think I need to do more optimization work.

I could have him run a Javascript benchmark here:

https://webkit.org/perf/sunspider/sunspider.html

Where are you doing your JavaScript ? In Open, it can create that kind of issue. Shown is probably better.

Pretty sure it is in Shown event but I’ll double-check on Monday.

It’s also worth noting that if the computer doesn’t have audio capabilities, the browser might not allow creating an audio tag. You could wrap your code in:

[code]if(S1) {

}[/code]

So at least it wouldn’t fail.

I verified that the Javascript where this particular error occurred is in fact in the Shown event.

I think what is going on is I am bumping up against a resource limit on some computers. This is causing a “general slowdown” which is something I have been battling for a while. I think I solved the problem for the majority of people by creating explicit instances of pages (e.g., declare WebPage1: Dim p as new WebPage1) and then closing web pages when they aren’t needed anymore. This particular error occurred about 2/3 of the way through the entire web app which is about where I would expect the “general slowing” to have occurred on a PC with limited resources. The entire web app takes anywhere from 30 minutes to an hour to complete and uses lots of youtube video, audio, and web canvases.

I used the Chrome Task Manager to monitor memory use as I was going through the web app. By the end of the app, I was using:

173,104 KB of memory
12,558 KB of image cache
1,446 KB of script cache
77,202 KB of Javascript memory
172,702 KB of GPU memory

Do any of these numbers seem excessive considering what I described ? Obviously, “excessive” is defined relative to local resources but I need to know where to focus in order to optimize the web app for some PCs with limited resources.

Yeah, those are a bit high. It’s worth noting that this will probably fail on iOS WAY before this though. Last time I checked, iOS was limited to 25MB.

The problem is that web apps like ours all load into the same “page” which means they all fall into the same memory pool.

Thanks Greg. Most of the time the app is running, it hovers around 60 MB. Is that acceptable for an app that runs on Desktop machine? Any guidelines you can provide would be helpful.

It isn’t until the very end that the app memory use shoots up. Fortunately, I know what I have to do to free up memory near the end of the app; I just don’t think I can get it down to 25 MB.

Any optimization pointers would be much appreciated.

For comparison, my gmail tab uses up 190 MB.

The demo app uses about 50 to 60 MB (Note: I can’t get the scroll to work; it only works via the mouse, not by grabbing the scrollbar on the screen).

For my app, I noticed that if I let it sit for 1 minute, the memory use goes way down (from about 130 MB to 55 MB). I have the session timeout set to 15 minutes so it isn’t due to this. I would prefer that it clear memory faster. Any idea what might be causing this slow memory release?

That’s completely up to the browser and the OS.