question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Memory leak with AudioContext

See original GitHub issue

I think I found a memory leak when using AudioContext. Here’s a some sample code and steps to reproduce:

  1. Click the play button once to warm up the page and wait for it to finish.
  2. Then, in chrome dev tools, take a heap snapshot.
  3. Then click the “play” button again and wait for it to finish.
  4. Then take another heap snapshot. Note the memory usage increases.
  5. Change the html code from var ctx = new sac.AudioContext() to var ctx = new AudioContext() (i.e. use the native AudioContext) and repeat the steps above, Note the memory usage stays the same.

After every play iteration, the memory usage goes up. If you run this same code using the native AudioContext object, the memory usage is stable.

<html>
<body>
    <button id="play" onclick="play()" disabled>Play</button>
    <script type='module'>
        import sac from 'https://dev.jspm.io/npm:standardized-audio-context';
        var ctx = new sac.AudioContext()
        var arrayBuffer;
        async function getArrayBuffer() {
            if (!arrayBuffer) {
                var response = await fetch('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/Yodel_Sound_Effect.mp3');
                arrayBuffer = await response.arrayBuffer();
            }
            return arrayBuffer.slice(0);
        }
        window.play = async function () {
            for (var i = 0; i < 100; i++) {
                console.log(`Playing ${i}`);
                let source = ctx.createBufferSource();
                source.buffer = await ctx.decodeAudioData(await getArrayBuffer());
                source.connect(ctx.destination)
                source.start();
                await new Promise((resolve) => {
                    setTimeout(resolve, 50)
                });
                source.stop();
            }
        }
        window.onload = () => {
            document.getElementById('play').removeAttribute('disabled');
        };
    </script>
</body>
</html>

standardized-audio-context memory usage (note how the memory grows over time): image

Native AudioContext memory usage (note how the memory does not increase over time): image

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:12 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
chrisguttandincommented, May 4, 2019

Hi @TwitchBronBron,

I finally found a way to set up automated tests for this problem. You can find the tests here: https://github.com/chrisguttandin/standardized-audio-context/blob/master/test/integration/memory.js

I used puppeteer which means, the tests run currently in Chrome only. That’s not optimal, but I don’t know of a way to do the same thing in other browsers.

To verify the memory usage I don’t inspect the heapSize anymore. I do instead use the queryObjects() function which counts the instances of the given object. I count the instances of Object.prototype in memory which basically covers every JavaScript object. All tests verify that the total number of objects does not change.

I tried various other methods as well. I plan to write a blog post about it and I will update this issue with a link when I got the time to actually do it.

Please note that the update is not yet published on npm. It will be part of the next major release which will be v20.

Many thanks again for reporting this issue. It was very helpful.

1reaction
chrisguttandincommented, Jun 8, 2019

Hi @TwitchBronBron, I finally published an article about the journey that led me to the final solution. Here is the link: https://media-codings.com/articles/automatically-detect-memory-leaks-with-puppeteer.

Do you want to be mentioned in the article. I would be very happy to add your name and a link to your website or Twitter profile somewhere because you are the one that made me explore all those things. I just didn’t do it so far because I wasn’t sure if you would want that. Just ping me if you don’t mind to be mentioned there.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Web Audio API Memory Leak - Stack Overflow
Web Audio API Memory Leak · Create a local html file and run the below code snippet in chrome on a desktop or...
Read more >
576484 - [Meta] WebAudio memory leak issues (GC) - Monorail
Summary: Any operation creating AudioBuffer in the process seems to be leaking. AudioBuffer in WebAudio has the internal memory for channels (AudioBus) which ......
Read more >
1332244 - Memory Leak in AudioContext (Works properly in Google ...
I tested on Win 7 with FF50/53, no memory leak. Memory stays stable and is released regularly. Component: Untriaged → Web Audio. Product:...
Read more >
soundjs/webaudio/WebAudioSoundInstance.js - CreateJS
<br />Audio context used to create nodes. This is and needs to be the same context used by ... destinationNode); // this line...
Read more >
Web Audio Api Memory Leak - ADocLib
I think I found a memory leak when using AudioContext. import sac from 'https://dev.jspm.io/npm:standardizedaudiocontext'; var ctx new sac.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found