Skip to content

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

Merged
Gustl22 merged 2 commits into
bluefireteam:mainfrom
Szymon-Gesicki:fix/web-safari-volume-gain-node
May 10, 2026
Merged

fix(web): Use GainNode for volume control to fix Safari compatibility#1978
Gustl22 merged 2 commits into
bluefireteam:mainfrom
Szymon-Gesicki:fix/web-safari-volume-gain-node

Conversation

@Szymon-Gesicki

@Szymon-Gesicki Szymon-Gesicki commented Mar 8, 2026

Copy link
Copy Markdown
Contributor

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:

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

@luanpotter luanpotter left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Gustl22

Gustl22 commented Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Thank you for the PR and providing reproduction steps! Also thanks for reviewing! I will quickly test the repro on the next weekend.

@Gustl22 Gustl22 self-requested a review May 8, 2026 17:32
@Gustl22

Gustl22 commented May 10, 2026

Copy link
Copy Markdown
Collaborator

Thanks for the valuable contribution and clean changes! Confirmed that it works now for Safari, Chrome and Firefox!

@Gustl22 Gustl22 enabled auto-merge (squash) May 10, 2026 06:59
@Gustl22 Gustl22 merged commit a3d7e3f into bluefireteam:main May 10, 2026
53 of 56 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants