fix(web): Use GainNode for volume control to fix Safari compatibility

[Szymon-Gesicki]

Description

When an HTMLAudioElement is connected to the Web Audio API via createMediaElementSource(), Safari ignores the HTMLMediaElement.volume property — the audio is routed through the Web Audio API graph and Safari expects volume to be controlled within that graph.

Previously, volume was set directly on the HTMLAudioElement.volume property, which only worked on Chrome (Chrome honors element.volume even after connecting to Web Audio API).

This PR replaces HTMLAudioElement.volume with a GainNode inserted into the Web Audio API processing chain:

Before: MediaElementSource → StereoPanner → Destination (volume via element.volume)
After: MediaElementSource → GainNode → StereoPanner → Destination (volume via gainNode.gain.value)

This is the standard pattern recommended by MDN for controlling volume in Web Audio API.

How to reproduce:

1. Open https://bluefireteam.github.io/audioplayers/ in Safari
2. Play any sound
3. Change the volume — nothing happens, volume stays the same
4. Open the same page in Chrome — volume control works correctly

Why GainNode is the correct fix:

• MDN: GainNode — supported in all browsers

Checklist

• The title of my PR starts with a Conventional Commit prefix (fix:, feat:, refactor:,
  docs:, chore:, test:, ci: etc).
• I have read the Contributor Guide and followed the process outlined for submitting PRs.
• I have updated/added tests for ALL new/updated/fixed functionality.
• I have updated/added relevant documentation and added dartdoc comments with ///, where necessary.
• I have updated/added relevant examples in example.

Breaking Change

• Yes, this is a breaking change.
• No, this is not a breaking change.

Related Issues