MediaStream in Safari fails to release resources correctly

Question

I am using the AudioWorkletNode method to record and all browsers seem to be recording fine.

When I record, the recording icon appears on the tab and disappears when the recording ends.

However, in Safari, a small speaker icon (usually indicating that the tab is emitting sound) will appear on the tab instead of the microphone icon.

So I think I may not have closed something.

After the recording is completed I will do the following:

//stream is a MediaStream type
if(stream)
  stream.getTracks().forEach(track => track.stop());
stream = null

The stream is created via:

stream = await navigator.mediaDevices.getUserMedia({
  audio: options
});

Is there anything else needed to release all resources?

Answer 1

To turn everything off, the following method seems to work. I just found this through trial and error because I couldn't figure out how to get Safari to tell me what it still holds:

// stream : MediaStream
// sourceNode : MediaStreamAudioSourceNode
// recorderNode : AudioWorkletNode

const tracks = stream.getTracks();
tracks.forEach((track) => {
  track.stop();
  stream.removeTrack(track)
});
stream = null

sourceNode.disconnect();
sourceNode = undefined

recorderNode.disconnect();
recorderNode = undefined