tags:

views:

99

answers:

4

I have a js function for playing any given sound using the Audio interface (creating a new instance for every call).

This works quite well, until about the 32nd call (sometimes less). This issue is directly related to the release of the Audio instance. I know this because I've allowed time for the GC in Chromium to run and it will allow me to play another 32 or so sounds again.

Here's an example of what I'm doing:

<html><head>
<script type="text/javascript">
function playSound(url) {
    var snd = new Audio(url);
    snd.play();
    snd = null;
}
</script>
</head>

<body>
<a href="#" onclick="playSound('blah.mp3');">Play sound</a>
</body></html>

I also have this, which works well for pages that have less than 32 playSound calls:

var AudioPlayer = {
    cache: {},
    play: function(url) {
        if (!AudioPlayer.cache[url])
            AudioPlayer.cache[url] = new Audio(url);
        AudioPlayer.cache[url].play();
    }
};

But this will not work for what I want to do (dynamically replace a div with other content (from separate files), which have even more sounds on them - 1. memory usage would easily skyrocket, 2. many sounds will never play).

I need a way to release the sound immediately. Is it possible to do this? I have found no free/close/unload method for the Audio interface.

The pages will be viewed locally, so the constant loading of sounds is not a big factor at all (and most sounds are rather short).

+3  A: 

I see at least one (or two) flaws:

snd = new Audio(url);

has no var in front of it, so snd is assigned to the global scope. That's usually not what you want: it clutters the global name space and if another script (e.g., an extension) incidentally uses snd, things will be a mess.

And that's also why

delete snd;

doesn't work: you can't delete global variables:

When declared variables and functions become properties of a Variable object — either Activation object (for Function code), or Global object (for Global code), these properties are created with DontDelete attribute.

So, use

var snd = new Audio(url);

instead. BTW, you can't force the JavaScript engine to do garbage collection.

Marcel Korpel
Ah, that. I was testing something not too long ago that had me remove the var. It was originally there.EDIT: Corrected.
plash
@plash: Ok, but I'll leave my answer here as it might be useful to other users.
Marcel Korpel
+1  A: 

This is not an exhaustive answer, but to the question "Is there any way to force the chrome js engine to do garbage collection?", a chromium.org guy replied:

In general, no, by design. For testing purposes there is a flag you can pass on the command line to enable a javascript command "window.gc()" to force garbage collection.

--js-flags '--expose_gc'


UPDATE: However, as @plash noted in a comment below, this flag will only work in debug builds.

Daniel Vassallo
Greeaat. I would have to start using a script to launch Chromium for this project (already using --allow-file-access-from-files so that I can open files from the local filesystem).EDIT: I consider this a last resort.
plash
@plash: Make sure to check out [the post that I linked to](https://groups.google.com/group/chromium-extensions/browse_thread/thread/5dc4be46e434116a?pli=1), because the response I quoted had further info which may be relevant. I didn't test this personally.
Daniel Vassallo
@Daniel Vassallo: It doesn't work in non-debug builds. Just tried it.
plash
@plash: Too bad... Let me update my answer, just for reference to other readers.
Daniel Vassallo
A: 

Just deleting and setting it to null didn't work for me either, so I made a workaround.

I got it working for more than one sound at the same time. To release the instances, every sound needs to be an Object Tag. Dynamically, append every Object Tag (sound) to a Div. To release the instance, dynamically remove the Object Tag (sound) from the Div.

I guess this works because a browser typically implements each tag as some kind of object. So, when I delete a tag, the internal object gets deleted and releases any resources associated with it.

<!--HTML: This will contains object sounds-->
<Div id="sounds"></Div>

//Javacript, using jQuery
//Create and play an MP3
var id_event = 1234; //Keep and incrementing a counter might do, I use an Event Id from my app.
var objSound = "<object width='1' height='1' id='AUDIOIE" + id_event 
        + " type='application/x-oleobject'  AND_MORE_PARAMS_TO_PLAY_A_MP3"
        + "/>";
$(objSound).appendTo('#sounds');

For complete object params go here.

//To Stop an MP3 and release it instance.
$('#AUDIOIE' + id_event).empty().remove();
Just for correctness: those “Object Tags” are rather [object elements](http://www.w3.org/TR/html401/struct/objects.html#edef-OBJECT). Please don't confuse [tags and elements](http://perfectionkills.com/tag-is-not-an-element-or-is-it/)!
Marcel Korpel
A: 

I've found the SoundManager2 project and used it instead of the Audio interface. I'll mark this as the answer because it is the only way I've found that solves all of my issues.

plash