diff --git a/.maestro/logged-out/audio-stems.yaml b/.maestro/logged-out/audio-stems.yaml
new file mode 100644
index 000000000..8025af93f
--- /dev/null
+++ b/.maestro/logged-out/audio-stems.yaml
@@ -0,0 +1,56 @@
+appId: ${APP_ID}
+---
+# Over fMP4 ingest (SP_E2E_INGEST=fmp4) the harness pushes the test stream
+# with a stem labeled "Music" beside the full mix. The player menu's Audio
+# section lists it; picking a level mixes the stems in place of the full mix,
+# and "Full mix" goes back. Web, which also checks what plays:
+# js/e2e-web/flows/audio-stems.spec.ts.
+- runFlow:
+    when:
+      true: ${typeof SP_E2E_INGEST !== "undefined" && SP_E2E_INGEST == "fmp4"}
+    commands:
+      - launchApp
+      # matched by testID because the card's link wrapper collapses its
+      # subtree on iOS
+      - extendedWaitUntil:
+          visible:
+            id: "home-stream-card"
+          timeout: 30000
+      - tapOn:
+          id: "home-stream-card"
+      - waitForAnimationToEnd
+      - extendedWaitUntil:
+          visible:
+            text: ".*e2e test stream.*"
+          timeout: 30000
+      # tap on the video to show the player controls
+      - tapOn:
+          point: 50%,20%
+      - tapOn:
+          id: "player-menu"
+      - extendedWaitUntil:
+          visible:
+            text: "Audio"
+          timeout: 10000
+      - assertVisible:
+          id: "player-audio-stem-0"
+      # substring matches: iOS merges a menu row's texts into one element
+      - assertVisible:
+          text: ".*Music.*"
+      - takeScreenshot: audio-stems-menu
+      - tapOn:
+          id: "player-audio-stem-0"
+      - tapOn:
+          id: "player-audio-stem-0-level-50"
+      # the submenu's header, titled with the stem, leads back
+      - tapOn:
+          text: "Music"
+      - extendedWaitUntil:
+          visible:
+            text: ".*50%.*"
+          timeout: 10000
+      - takeScreenshot: audio-stems-mixed
+      - tapOn:
+          id: "player-audio-full-mix"
+      - assertNotVisible:
+          text: ".*50%.*"
diff --git a/js/components/src/components/mobile-player/ui/viewer-context-menu.tsx b/js/components/src/components/mobile-player/ui/viewer-context-menu.tsx
index ea8b1398d..21d4329eb 100644
--- a/js/components/src/components/mobile-player/ui/viewer-context-menu.tsx
+++ b/js/components/src/components/mobile-player/ui/viewer-context-menu.tsx
@@ -7,7 +7,7 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import { useLivestreamInfo, useStreamplaceStore, zero } from "../../..";
-import { useLivestreamStore } from "../../../livestream-store";
+import { useAudioStems, useLivestreamStore } from "../../../livestream-store";
 import { PlayerProtocol, usePlayerStore } from "../../../player-store/";
 import {
   DropdownMenu,
@@ -27,6 +27,11 @@ import {
 } from "../../ui";
 import { ReportMenuItems } from "./report-menu-items";
 
+// The stem volumes a viewer can pick; 0 silences the stem.
+const STEM_LEVELS = [0, 0.25, 0.5, 1];
+const stemLevelLabel = (level: number) =>
+  level === 0 ? "Off" : `${level * 100}%`;
+
 export function ContextMenu({
   dropdownPortalContainer,
   onOpenChat,
@@ -53,6 +58,12 @@ export function ContextMenu({
 
   const isDevModeOn = useStreamplaceStore((x) => x.danmuUnlocked);
 
+  // Only WebRTC carries the stems (HLS has just the full mix), so the Audio
+  // section shows with low latency on.
+  const stems = useAudioStems();
+  const stemVolumes = usePlayerStore((x) => x.stemVolumes);
+  const setStemVolumes = usePlayerStore((x) => x.setStemVolumes);
+
   const latestSegment = useLivestreamStore((x) => x.segment);
   // get highest height x width rendition for video
   const videoRendition = latestSegment?.video?.reduce((prev, current) => {
@@ -115,7 +126,7 @@ export function ContextMenu({
   // rerender when dropdown portal container changes so we swap portals 'seamlessly'
   return (
     <DropdownMenu onOpenChange={setIsOpen} key={dropdownPortalContainer}>
-      <DropdownMenuTrigger>
+      <DropdownMenuTrigger testID="player-menu">
         <Animated.View style={[iconRotate]}>
           <Cog color={th.theme.colors.foreground} />
         </Animated.View>
@@ -202,6 +213,69 @@ export function ContextMenu({
             </DropdownMenuSubContent>
           </DropdownMenuSub>
         </DropdownMenuGroup>
+        {mode !== "vod" && lowLatency && stems.length > 0 && (
+          <DropdownMenuGroup title="Audio">
+            <DropdownMenuCheckboxItem
+              testID="player-audio-full-mix"
+              checked={stemVolumes === null}
+              onCheckedChange={() =>
+                setStemVolumes(stemVolumes === null ? {} : null)
+              }
+            >
+              <Text>Full mix</Text>
+            </DropdownMenuCheckboxItem>
+            {stems.map((stem, i) => {
+              const level = stemVolumes?.[stem.alternateGroup] ?? 1;
+              return (
+                <DropdownMenuSub key={stem.alternateGroup}>
+                  <DropdownMenuSubTrigger
+                    subMenuTitle={stem.label}
+                    testID={`player-audio-stem-${i}`}
+                  >
+                    <View
+                      style={[
+                        zero.flex.values[1],
+                        zero.layout.flex.row,
+                        zero.layout.flex.spaceBetween,
+                        zero.pr[4],
+                      ]}
+                    >
+                      <Text>{stem.label}</Text>
+                      {stemVolumes !== null && (
+                        <Text muted size={isMobile ? "base" : "sm"}>
+                          {stemLevelLabel(level)}
+                        </Text>
+                      )}
+                    </View>
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuSubContent portalHost={dropdownPortalContainer}>
+                    <DropdownMenuGroup title="Volume">
+                      <DropdownMenuRadioGroup
+                        value={stemVolumes === null ? "" : String(level)}
+                        onValueChange={(value) =>
+                          setStemVolumes({
+                            ...stemVolumes,
+                            [stem.alternateGroup]: Number(value),
+                          })
+                        }
+                      >
+                        {STEM_LEVELS.map((l) => (
+                          <DropdownMenuRadioItem
+                            key={l}
+                            value={String(l)}
+                            testID={`player-audio-stem-${i}-level-${l * 100}`}
+                          >
+                            <Text>{stemLevelLabel(l)}</Text>
+                          </DropdownMenuRadioItem>
+                        ))}
+                      </DropdownMenuRadioGroup>
+                    </DropdownMenuGroup>
+                  </DropdownMenuSubContent>
+                </DropdownMenuSub>
+              );
+            })}
+          </DropdownMenuGroup>
+        )}
         {onOpenChat && (
           <DropdownMenuGroup title="View">
             <DropdownMenuItem closeOnPress={true} onPress={onOpenChat}>
diff --git a/js/components/src/components/mobile-player/use-webrtc.tsx b/js/components/src/components/mobile-player/use-webrtc.tsx
index 2f79b7bf0..5a4ae8c6c 100644
--- a/js/components/src/components/mobile-player/use-webrtc.tsx
+++ b/js/components/src/components/mobile-player/use-webrtc.tsx
@@ -15,8 +15,12 @@ import { RTCPeerConnection, RTCSessionDescription } from "./webrtc-primitives";
 export default function useWebRTC(
   streamer: string,
   rendition: string,
-): [MediaStream | null, boolean] {
+): [MediaStream | null, boolean, (MediaStreamTrack | undefined)[]] {
   const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);
+  // The received audio tracks by transceiver: the full mix, then each stem.
+  const [audioTracks, setAudioTracks] = useState<
+    (MediaStreamTrack | undefined)[]
+  >([]);
   const [stuck, setStuck] = useState<boolean>(false);
   const setStatus = usePlayerStore((x) => x.setStatus);
   let agent = usePossiblyUnauthedPDSAgent();
@@ -42,15 +46,33 @@ export default function useWebRTC(
     peerConnection.addTransceiver("video", {
       direction: "recvonly",
     });
-    peerConnection.addTransceiver("audio", {
-      direction: "recvonly",
-    });
+    // The node sends the full mix on the first audio transceiver and up to
+    // two stems on the others.
+    const audioTransceivers = [0, 1, 2].map(() =>
+      peerConnection.addTransceiver("audio", {
+        direction: "recvonly",
+      }),
+    );
+    const received: (MediaStreamTrack | undefined)[] = [];
     peerConnection.addEventListener("track", (event) => {
       const track = event.track;
       if (!track) {
         return;
       }
-      setMediaStream(event.streams[0]);
+      // An offered transceiver the node leaves unused still fires a track
+      // event, with no stream: keep the stream the real tracks arrived on.
+      if (event.streams[0]) {
+        setMediaStream(event.streams[0]);
+      }
+      const i = audioTransceivers.findIndex(
+        (t) => t.receiver.track?.id === track.id,
+      );
+      if (i >= 0) {
+        received[i] = track;
+      }
+      // A fresh array for every track, so consumers that also read the
+      // stream's tracks catch up with each arrival.
+      setAudioTracks([...received]);
     });
     peerConnection.addEventListener("connectionstatechange", () => {
       console.log("connection state change", peerConnection.connectionState);
@@ -114,7 +136,7 @@ export default function useWebRTC(
       peerConnection.close();
     };
   }, [streamer, agent, isOwnStream, playbackWorkerUrl, rendition]);
-  return [mediaStream, stuck];
+  return [mediaStream, stuck, audioTracks];
 }
 
 /**
diff --git a/js/components/src/components/mobile-player/video-async.native.tsx b/js/components/src/components/mobile-player/video-async.native.tsx
index 1dc7419fa..8ca7d79bc 100644
--- a/js/components/src/components/mobile-player/video-async.native.tsx
+++ b/js/components/src/components/mobile-player/video-async.native.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { LayoutChangeEvent, Linking } from "react-native";
 import {
   MediaStream,
+  MediaStreamTrack,
   RTCView,
   RTCView as RTCViewIngest,
 } from "react-native-webrtc";
@@ -14,6 +15,7 @@ import {
   PlayerProtocol,
   PlayerStatus,
   Text,
+  useAudioTrackLevels,
   useEffectiveVolume,
   usePlayerStore as useIngestPlayerStore,
   useMuted,
@@ -278,7 +280,7 @@ export function NativeWHEP(props?: {
 }) {
   const selectedRendition = usePlayerStore((x) => x.selectedRendition);
   const src = usePlayerStore((x) => x.src);
-  const [stream, stuck] = useWebRTC(src, selectedRendition);
+  const [stream, stuck, audioTracks] = useWebRTC(src, selectedRendition);
   const status = usePlayerStore((x) => x.status);
 
   const setPlayerWidth = usePlayerStore((x) => x.setPlayerWidth);
@@ -303,6 +305,7 @@ export function NativeWHEP(props?: {
   const setStatus = usePlayerStore((x) => x.setStatus);
   const muted = useMuted();
   const volume = useEffectiveVolume();
+  const levels = useAudioTrackLevels();
 
   useEffect(() => {
     if (stuck && status === PlayerStatus.PLAYING) {
@@ -325,16 +328,14 @@ export function NativeWHEP(props?: {
   //   setStatus(PlayerStatus.PLAYING);
   // }, [mediaStream, setStatus]);
 
+  // Every received audio track plays; the levels pick the full mix or stems.
   useEffect(() => {
-    if (!mediaStream) {
-      return;
-    }
-    mediaStream.getTracks().forEach((track) => {
-      if (track.kind === "audio") {
-        track._setVolume(muted ? 0 : volume);
-      }
+    audioTracks.forEach((track, i) => {
+      (track as unknown as MediaStreamTrack | undefined)?._setVolume(
+        muted ? 0 : volume * (levels[i] ?? 0),
+      );
     });
-  }, [mediaStream, muted, volume]);
+  }, [audioTracks, muted, volume, levels]);
 
   // Keep the playerStore videoRef in sync for PiP (if possible)
   useEffect(() => {
diff --git a/js/components/src/components/mobile-player/video.tsx b/js/components/src/components/mobile-player/video.tsx
index 04f12b7b2..a5c38c9fa 100644
--- a/js/components/src/components/mobile-player/video.tsx
+++ b/js/components/src/components/mobile-player/video.tsx
@@ -1,14 +1,23 @@
 import type Hls from "hls.js";
-import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   IngestMediaSource,
   PlayerProtocol,
   PlayerStatus,
+  useAudioTrackLevels,
   useEffectiveVolume,
   useMuted,
   usePlayerStore,
   useSetMuted,
   useStreamplaceStore,
+  useVolume,
 } from "../..";
 import { borderRadius, mt } from "../../lib/theme/atoms";
 import { statusColors, surfaces } from "../../lib/theme/tokens";
@@ -631,7 +640,28 @@ export function WebRTCPlayerInner({
   const playerEvent = usePlayerStore((x) => x.playerEvent);
   const spurl = useStreamplaceStore((x) => x.url);
 
-  const [mediaStream, stuck] = useWebRTC(src, selectedRendition);
+  const [mediaStream, stuck, audioTracks] = useWebRTC(src, selectedRendition);
+  const levels = useAudioTrackLevels();
+  const [fullMix, ...stems] = audioTracks;
+
+  // The video element gets the video and the full mix; each stem the viewer
+  // mixes in plays from its own audio element below. A new array of audio
+  // tracks also means the stream has gained a track.
+  const videoStream = useMemo(
+    () =>
+      mediaStream &&
+      new MediaStream([
+        ...mediaStream.getVideoTracks(),
+        ...(fullMix ? [fullMix] : []),
+      ]),
+    [mediaStream, audioTracks],
+  );
+
+  useEffect(() => {
+    if (fullMix) {
+      fullMix.enabled = levels[0] > 0;
+    }
+  }, [fullMix, levels]);
 
   useEffect(() => {
     if (stuck) {
@@ -690,8 +720,8 @@ export function WebRTCPlayerInner({
     if (!videoRef || !videoRef.current) {
       return;
     }
-    videoRef.current.srcObject = mediaStream;
-  }, [mediaStream]);
+    videoRef.current.srcObject = videoStream;
+  }, [videoStream]);
 
   if (!mediaStream) {
     const isError = connectionStatus === "connection-failed";
@@ -722,7 +752,47 @@ export function WebRTCPlayerInner({
       </View>
     );
   }
-  return <VideoElement url={url} ref={videoRef} />;
+  return (
+    <>
+      <VideoElement url={url} ref={videoRef} />
+      {stems.map(
+        (track, i) =>
+          track &&
+          levels[i + 1] > 0 && (
+            <StemAudio key={track.id} track={track} level={levels[i + 1]} />
+          ),
+      )}
+    </>
+  );
+}
+
+// One stem, playing at its own level under the player's volume and mute.
+function StemAudio({
+  track,
+  level,
+}: {
+  track: MediaStreamTrack;
+  level: number;
+}) {
+  const ref = useRef<HTMLAudioElement | null>(null);
+  const volume = useVolume();
+  const muted = useMuted();
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.srcObject = new MediaStream([track]);
+    }
+  }, [track]);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.volume = volume * level;
+    }
+  }, [volume, level]);
+
+  return (
+    <audio ref={ref} autoPlay muted={muted} data-testid="player-stem-audio" />
+  );
 }
 
 export function WebcamIngestPlayer(props: VideoProps) {
diff --git a/js/components/src/livestream-store/index.tsx b/js/components/src/livestream-store/index.tsx
index 4925564f5..596dba021 100644
--- a/js/components/src/livestream-store/index.tsx
+++ b/js/components/src/livestream-store/index.tsx
@@ -31,6 +31,7 @@ export {
 export { useStreamKey } from "./stream-key";
 export {
   getStoreFromContext,
+  useAudioStems,
   useChat,
   useHandleWebsocketMessages,
   useLivestream,
diff --git a/js/components/src/livestream-store/use-store.tsx b/js/components/src/livestream-store/use-store.tsx
index ed7db7b41..76637e06c 100644
--- a/js/components/src/livestream-store/use-store.tsx
+++ b/js/components/src/livestream-store/use-store.tsx
@@ -3,12 +3,14 @@
 // re-renders on changes. useLivestreamStoreOptional never throws when
 // there's no provider above (useful for mode-generic hooks like useTitle).
 import {
+  audioStems,
   handleWebSocketMessages,
   makeLivestreamStore,
+  type AudioStem,
   type LivestreamState,
   type LivestreamStore,
 } from "@streamplace/core";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import { useStore } from "zustand";
 import { LivestreamContext } from "./context";
 
@@ -73,6 +75,15 @@ export const useLivestream = (includeEnded: boolean = false) =>
 
 export const useSegment = () => useLivestreamStore((x) => x.segment);
 
+// The latest segment's audio stems. Every segment repeats them, so subscribe
+// to their serialized form: callers rerender only when the stems change.
+export const useAudioStems = (): AudioStem[] => {
+  const stems = useLivestreamStoreOptional((x) =>
+    JSON.stringify(audioStems(x.segment)),
+  );
+  return useMemo(() => JSON.parse(stems), [stems]);
+};
+
 export const useRecentSegments = () =>
   useLivestreamStore((x) => x.recentSegments);
 
diff --git a/js/components/src/player-store/player-state.tsx b/js/components/src/player-store/player-state.tsx
index 3fde1a7aa..92f8ebb2f 100644
--- a/js/components/src/player-store/player-state.tsx
+++ b/js/components/src/player-store/player-state.tsx
@@ -53,6 +53,12 @@ export interface PlayerState {
   streamForcesHLS: boolean;
   setStreamForcesHLS: (forced: boolean) => void;
 
+  /** The viewer's volume (0-1) for each audio stem, keyed by its
+   *  alternateGroup: null plays the full mix, otherwise the stems play
+   *  instead (1 for a stem without an entry). WebRTC playback only. */
+  stemVolumes: Record<number, number> | null;
+  setStemVolumes: (stemVolumes: Record<number, number> | null) => void;
+
   /** Source (streamer did) */
   src: string;
   /** The streamer's own playback session (getPlaybackSession) for their
diff --git a/js/components/src/player-store/player-store.tsx b/js/components/src/player-store/player-store.tsx
index 2764567b0..e389a3ee9 100644
--- a/js/components/src/player-store/player-store.tsx
+++ b/js/components/src/player-store/player-store.tsx
@@ -1,8 +1,9 @@
 import { ComAtprotoModerationCreateReport } from "@atproto/api";
-import { useContext, useEffect, useState } from "react";
+import { audioTrackLevels } from "@streamplace/core";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { ChatMessageViewHydrated } from "streamplace";
 import { createStore, StoreApi, useStore } from "zustand";
-import { useLivestreamStore } from "../livestream-store";
+import { useAudioStems, useLivestreamStore } from "../livestream-store";
 import storage from "../storage";
 import { useStreamplaceStore } from "../streamplace-store";
 import { PlayerContext } from "./context";
@@ -82,6 +83,9 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
         .catch(console.error);
     },
 
+    stemVolumes: null,
+    setStemVolumes: (stemVolumes) => set(() => ({ stemVolumes })),
+
     src: "",
     setSrc: (src: string) => set(() => ({ src })),
     playbackSession: undefined,
@@ -398,3 +402,14 @@ export const useIsMyStream = () => {
     return myHandle === channelId || myDid === channelId;
   };
 };
+
+// The level of each WebRTC audio track (full mix, then each stem) for the
+// viewer's stem volumes; see audioTrackLevels.
+export const useAudioTrackLevels = () => {
+  const stems = useAudioStems();
+  const stemVolumes = usePlayerStore((x) => x.stemVolumes);
+  return useMemo(
+    () => audioTrackLevels(stems, stemVolumes),
+    [stems, stemVolumes],
+  );
+};
diff --git a/js/core/src/index.ts b/js/core/src/index.ts
index 05df82bb6..55c3dd1c2 100644
--- a/js/core/src/index.ts
+++ b/js/core/src/index.ts
@@ -6,6 +6,7 @@ export * from "./slash-commands";
 export * from "./slash-commands/teleport";
 
 export * from "./hooks/use-actor-typeahead";
+export * from "./lib/audio-stems";
 export * from "./lib/badge-label";
 export * from "./lib/browser";
 export * from "./lib/did";
diff --git a/js/core/src/lib/audio-stems.test.ts b/js/core/src/lib/audio-stems.test.ts
new file mode 100644
index 000000000..a675448ff
--- /dev/null
+++ b/js/core/src/lib/audio-stems.test.ts
@@ -0,0 +1,80 @@
+import { place } from "streamplace";
+import { describe, expect, it } from "vitest";
+import { audioStems, audioTrackLevels } from "./audio-stems";
+
+const segment = (audio: place.stream.segment.Audio[]) =>
+  ({ audio }) as place.stream.segment.Main;
+
+describe("audioStems", () => {
+  it("finds no stems without alternate groups", () => {
+    expect(
+      audioStems(segment([{ codec: "opus", rate: 48000, channels: 2 }])),
+    ).toEqual([]);
+    expect(audioStems(null)).toEqual([]);
+  });
+
+  it("lists the groups above the full mix once each, in group order", () => {
+    expect(
+      audioStems(
+        segment([
+          { codec: "aac", rate: 48000, channels: 2, alternateGroup: 3 },
+          { codec: "aac", rate: 48000, channels: 2, alternateGroup: 1 },
+          {
+            codec: "aac",
+            rate: 48000,
+            channels: 2,
+            alternateGroup: 4,
+            label: "Voice",
+          },
+          {
+            codec: "opus",
+            rate: 48000,
+            channels: 2,
+            alternateGroup: 3,
+            label: "Music",
+          },
+          {
+            codec: "opus",
+            rate: 48000,
+            channels: 2,
+            alternateGroup: 4,
+            label: "Voice",
+          },
+        ]),
+      ),
+    ).toEqual([
+      { alternateGroup: 3, label: "Music" },
+      { alternateGroup: 4, label: "Voice" },
+    ]);
+  });
+
+  it("treats an entry without a group as the full mix", () => {
+    expect(
+      audioStems(
+        segment([
+          { codec: "opus", rate: 48000, channels: 2 },
+          { codec: "opus", rate: 48000, channels: 2, alternateGroup: 2 },
+        ]),
+      ),
+    ).toEqual([{ alternateGroup: 2, label: "Track 2" }]);
+  });
+});
+
+describe("audioTrackLevels", () => {
+  const stems = [
+    { alternateGroup: 2, label: "Music" },
+    { alternateGroup: 3, label: "Voice" },
+  ];
+
+  it("plays only the full mix by default", () => {
+    expect(audioTrackLevels(stems, null)).toEqual([1, 0, 0]);
+  });
+
+  it("silences the full mix and plays every stem once stems are mixed", () => {
+    expect(audioTrackLevels(stems, { 2: 0.25 })).toEqual([0, 0.25, 1]);
+  });
+
+  it("keeps the full mix when the stream has no stems", () => {
+    expect(audioTrackLevels([], { 2: 0.25 })).toEqual([1]);
+  });
+});
diff --git a/js/core/src/lib/audio-stems.ts b/js/core/src/lib/audio-stems.ts
new file mode 100644
index 000000000..f5c5d7775
--- /dev/null
+++ b/js/core/src/lib/audio-stems.ts
@@ -0,0 +1,46 @@
+import { place } from "streamplace";
+
+export type AudioStem = { alternateGroup: number; label: string };
+
+/**
+ * The stems in a segment's audio: tracks of the same alternateGroup carry the
+ * same sound in different codecs, the lowest group (or an entry without one)
+ * is the full mix and every higher group is a stem. In ascending group order,
+ * which is also the order the node sends their WebRTC tracks in.
+ */
+export function audioStems(
+  segment: place.stream.segment.Main | null | undefined,
+): AudioStem[] {
+  const audio = segment?.audio ?? [];
+  const main = Math.min(...audio.map((a) => a.alternateGroup ?? 0));
+  // Each group's label, from whichever of its entries has one.
+  const stems = new Map<number, string>();
+  for (const a of audio) {
+    const group = a.alternateGroup ?? 0;
+    if (group > main && !stems.get(group)) {
+      stems.set(group, a.label ?? "");
+    }
+  }
+  return [...stems]
+    .sort(([a], [b]) => a - b)
+    .map(([alternateGroup, label]) => ({
+      alternateGroup,
+      label: label || `Track ${alternateGroup}`,
+    }));
+}
+
+/**
+ * The level (0-1, before the player volume) of each WebRTC audio track: the
+ * full mix first, then one per stem. By default only the full mix plays; once
+ * the viewer sets stem volumes (keyed by alternateGroup, 1 when unset), the
+ * full mix is silent and every stem plays at its own level.
+ */
+export function audioTrackLevels(
+  stems: AudioStem[],
+  stemVolumes: Record<number, number> | null,
+): number[] {
+  if (stemVolumes === null || stems.length === 0) {
+    return [1, ...stems.map(() => 0)];
+  }
+  return [0, ...stems.map((s) => stemVolumes[s.alternateGroup] ?? 1)];
+}
diff --git a/js/e2e-web/flows/audio-stems.spec.ts b/js/e2e-web/flows/audio-stems.spec.ts
new file mode 100644
index 000000000..545db762f
--- /dev/null
+++ b/js/e2e-web/flows/audio-stems.spec.ts
@@ -0,0 +1,62 @@
+import { expect, test, type Locator } from "@playwright/test";
+
+// Mirror of .maestro/logged-out/audio-stems.yaml. Over fMP4 ingest the harness
+// pushes the test stream with a stem labeled "Music" beside the full mix, and
+// WebRTC playback receives both: the video element plays the full mix and each
+// stem the viewer mixes in plays from its own audio element.
+test.skip(
+  process.env.SP_E2E_INGEST !== "fmp4",
+  "the test stream has stems only over fMP4 ingest",
+);
+
+// Whether the video element's audio, the full mix, is audible.
+const fullMixEnabled = (video: Locator) =>
+  video.evaluate(
+    (v: HTMLVideoElement) =>
+      (v.srcObject as MediaStream | null)?.getAudioTracks()[0]?.enabled ?? null,
+  );
+
+test("audio stems: switch from the full mix to the stems and back", async ({
+  page,
+}) => {
+  await page.goto("/");
+  const card = page.getByTestId("home-stream-card").first();
+  await expect(card).toBeVisible({ timeout: 30_000 });
+  await card.click();
+
+  const video = page.locator("video").first();
+  await expect(video).toBeVisible({ timeout: 30_000 });
+  await expect.poll(() => fullMixEnabled(video)).toBe(true);
+  const stemAudio = page.getByTestId("player-stem-audio");
+  await expect(stemAudio).toHaveCount(0);
+
+  // moving the mouse onto the video reveals the player controls (the
+  // player's overlay takes the pointer, so hover() can't target the video)
+  const box = await video.boundingBox();
+  if (!box) {
+    throw new Error("player video has no bounding box");
+  }
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height + 16);
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  await page.locator('[data-testid="player-menu"]:visible').first().click();
+  await expect(page.getByText("Audio", { exact: true })).toBeVisible();
+  const music = page.getByTestId("player-audio-stem-0");
+  await expect(music).toContainText("Music");
+
+  await music.click();
+  await page.getByTestId("player-audio-stem-0-level-50").click();
+  await expect(stemAudio).toHaveCount(1);
+  await expect.poll(() => fullMixEnabled(video)).toBe(false);
+  expect(await stemAudio.evaluate((a: HTMLAudioElement) => a.volume)).toBe(0.5);
+  expect(
+    await stemAudio.evaluate(
+      (a: HTMLAudioElement) =>
+        (a.srcObject as MediaStream).getAudioTracks()[0].readyState,
+    ),
+  ).toBe("live");
+  await expect(music).toContainText("50%");
+
+  await page.getByTestId("player-audio-full-mix").click();
+  await expect(stemAudio).toHaveCount(0);
+  await expect.poll(() => fullMixEnabled(video)).toBe(true);
+});