Memory Leak in Web

[ari-donnenfeld]

Which API doesn't behave as documented, and how does it misbehave?
AudioPlayer.dispose() does not free all data in memory in the web version.

Minimal reproduction project

Example (Simply adds a 'dispose' button.)

To Reproduce (i.e. user steps, not code)
Steps to reproduce the behavior:

1. Run the example in web: flutter run --profile -d chrome
2. Press Play
3. Press Pause
4. Press Delete (dispose)
5. Open ChromeTools -> Memory Tab
6. Press 'Take snapshot'
7. Control+F for "amazonaws"
8. Note the disposed audio source uri it is still in memory

Error messages
N/A

Expected behavior
All memory related to the player should be freed.

Current behavior
The uri string remains in memory.

Screenshots
N/A

Desktop:

• Browser: tested on chromium v136

Smartphone (please complete the following information):
N/A

Flutter SDK version

[✓] Flutter (Channel stable, 3.29.3, on EndeavourOS 6.14.6-arch1-1, locale en_GB.UTF-8)

Additional context

Important context being that web version of StreamAudioSource uses Uri.parse('data:$mimeType;base64,$base64Data') to create the audioSource. This means that the data of the song is embedded in the uri. This means that the leaked data by leaving the uri in memory can be 5-10MB per song, and will add up really quick for music players.

I believe to have located the root of the issue but I'm not certain how to fix it correctly. The player is creating an audio element onto the dom: final _audioElement = document.createElement('audio') as HTMLAudioElement;. The _audioElement is never freed and since it's in the dom, it won't be garbage collected when de-referenced in the dart code.

The following should be called on all the audio elements when disposing the player: _audioElement.remove() to remove it from the dom before de-referencing it.