Skip to content

Only use new spatial audio if new apis are available #11235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
riknoll merged 2 commits into from
Apr 2, 2026
+40 −18
Merged

Only use new spatial audio if new apis are available #11235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f083dc2
only use new spatial audio if new apis are available
srietkerk Apr 1, 2026
513f012
Merge branch 'master' into srietkerk/firefox-audio-fix
riknoll Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions pxtsim/sound/audioContextManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,9 +348,15 @@ namespace pxsim.AudioContextManager {
export function setListenerPosition(x: number, y: number, z: number) {
const ctx = context();
if (ctx) {
ctx.listener.positionX.setTargetAtTime(x, 0, 0.02);
ctx.listener.positionY.setTargetAtTime(y, 0, 0.02);
ctx.listener.positionZ.setTargetAtTime(z, 0, 0.02);
// Firefox does not support AudioParam-based positionX/Y/Z on AudioListener.
// Fall back to the deprecated setPosition() method.
if (ctx.listener.positionX) {
ctx.listener.positionX.setTargetAtTime(x, 0, 0.02);
ctx.listener.positionY.setTargetAtTime(y, 0, 0.02);
ctx.listener.positionZ.setTargetAtTime(z, 0, 0.02);
} else {
ctx.listener.setPosition(x, y, z);
}
}
}
}
46 changes: 31 additions & 15 deletions pxtsim/sound/spatialAudioPlayer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,26 +35,20 @@ namespace pxsim.AudioContextManager {
this.panner = new PannerNode(context, {
panningModel: 'HRTF',
distanceModel: "linear",
positionX: 0,
positionY: 0,
positionZ: 0,
orientationX: 0,
orientationY: 0,
orientationZ: -1,
});
// Set initial position/orientation using the compat helpers
// (Firefox doesn't support AudioParam-based position/orientation properties)
setPannerPosition(this.panner, 0, 0, 0);
setPannerOrientation(this.panner, 0, 0, -1);
Comment on lines +39 to +42
Copy link

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

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

The compat helpers use AudioParam.setTargetAtTime(...) for the initial position/orientation set in the constructor. This changes behavior vs the previous PannerNode options (which set the initial values immediately) and can leave the node briefly at the browser defaults (e.g. orientation (1,0,0)) before it converges. Consider using an immediate set (e.g. setValueAtTime at panner.context.currentTime) for the initial values, and reserve setTargetAtTime for subsequent smoothing updates.

Suggested change
// Set initial position/orientation using the compat helpers
// (Firefox doesn't support AudioParam-based position/orientation properties)
setPannerPosition(this.panner, 0, 0, 0);
setPannerOrientation(this.panner, 0, 0, -1);
// Set initial position/orientation immediately.
// Prefer legacy methods for broader browser support; fall back to AudioParams.
const now = this.context.currentTime;
if (typeof (this.panner as any).setPosition === "function") {
(this.panner as any).setPosition(0, 0, 0);
} else {
if (this.panner.positionX) this.panner.positionX.setValueAtTime(0, now);
if (this.panner.positionY) this.panner.positionY.setValueAtTime(0, now);
if (this.panner.positionZ) this.panner.positionZ.setValueAtTime(0, now);
}
if (typeof (this.panner as any).setOrientation === "function") {
(this.panner as any).setOrientation(0, 0, -1);
} else {
if (this.panner.orientationX) this.panner.orientationX.setValueAtTime(0, now);
if (this.panner.orientationY) this.panner.orientationY.setValueAtTime(0, now);
if (this.panner.orientationZ) this.panner.orientationZ.setValueAtTime(-1, now);
}

Copilot uses AI. Check for mistakes.
this.panner.connect(destination);
}

setPosition(x: number, y: number, z: number) {
this.panner.positionX.setTargetAtTime(x, 0, 0.02);
this.panner.positionY.setTargetAtTime(y, 0, 0.02);
this.panner.positionZ.setTargetAtTime(z, 0, 0.02);
setPannerPosition(this.panner, x, y, z);
}

setOrientation(x: number, y: number, z: number) {
this.panner.orientationX.setTargetAtTime(x, 0, 0.02);
this.panner.orientationY.setTargetAtTime(y, 0, 0.02);
this.panner.orientationZ.setTargetAtTime(z, 0, 0.02);
setPannerOrientation(this.panner, x, y, z);
}

setCone(innerAngle: number, outerAngle: number, outerGain: number) {
Expand Down Expand Up @@ -83,9 +77,9 @@ namespace pxsim.AudioContextManager {
}
}

get x(): number { return this.panner.positionX.value; }
get y(): number { return this.panner.positionY.value; }
get z(): number { return this.panner.positionZ.value; }
get x(): number { return this.panner.positionX?.value ?? 0; }
get y(): number { return this.panner.positionY?.value ?? 0; }
get z(): number { return this.panner.positionZ?.value ?? 0; }

dispose() {
this.panner.disconnect();
Expand All @@ -110,4 +104,26 @@ namespace pxsim.AudioContextManager {
await this.audioWorkletSource.playInstructionsAsync(b);
}
}

// Firefox does not support AudioParam-based positionX/Y/Z and orientationX/Y/Z
// on PannerNode or AudioListener. Fall back to the deprecated setPosition()/setOrientation() methods.
function setPannerPosition(panner: PannerNode, x: number, y: number, z: number) {
if (panner.positionX) {
panner.positionX.setTargetAtTime(x, 0, 0.02);
panner.positionY.setTargetAtTime(y, 0, 0.02);
panner.positionZ.setTargetAtTime(z, 0, 0.02);
} else {
panner.setPosition(x, y, z);
}
}

function setPannerOrientation(panner: PannerNode, x: number, y: number, z: number) {
if (panner.orientationX) {
panner.orientationX.setTargetAtTime(x, 0, 0.02);
panner.orientationY.setTargetAtTime(y, 0, 0.02);
panner.orientationZ.setTargetAtTime(z, 0, 0.02);
} else {
panner.setOrientation(x, y, z);
}
}
}
Loading