feat(packages): add audio tracks menu

[sampotts]

Summary

• Adds support for audio tracks in the settings menu.
• No standalone menu trigger yet.
• No audio skin support yet.

Closes #1421

Screenshots

Default

Minimal

---

Note

Medium Risk
Touches playback media track APIs and video feature presets; selection mutates native audioTracks.enabled, but pattern matches existing quality/caption menus with solid test coverage.

Overview
Adds multi-audio track selection end-to-end: player store state, UI primitives, and settings-menu integration across HTML and React video skins.

Core / DOM: New MediaAudioTrackState, isMediaAudioTrackCapable, and an audioTrack player feature that mirrors media.audioTracks (including loadstart / addtrack / change) and applies exclusive selection via selectAudioTrack. videoFeatures and selectAudioTrack export the capability; AudioTrackRadioGroupCore drives track list, labels, availability (only when >1 track), and selection.

HTML / React: media-audio-track-radio-group custom element, useAudioTrackOptions, and menu wiring (audio-track setting type, hint labels). Default and minimal skins gain an Audio submenu (speech icon) between Quality and Speed. Docs add feature-audio-track reference.

No standalone audio-only skin or dedicated toolbar button in this PR—settings submenu only.

^{Reviewed by Cursor Bugbot for commit 7cb93df. Bugbot is set up for automated code reviews on this repo. Configure here.}

[netlify]

❌ Deploy Preview for vjs10-site failed. Why did it fail? →

Name	Link
🔨 Latest commit	7cb93df
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/6a431e94dc4899000764f0cb

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Jun 30, 2026 1:41am

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html

Path	Base initial	PR initial	Diff	%	Lazy
/video/minimal-skin	44.78 kB	45.67 kB	+908 B	+2.0%	—	🔺
/video/minimal-skin.tailwind	45.51 kB	46.35 kB	+852 B	+1.8%	—	🔺
/video/skin	45.08 kB	45.69 kB	+625 B	+1.4%	—	🔺
/video/skin.tailwind	45.81 kB	46.49 kB	+696 B	+1.5%	—	🔺
/audio/minimal-skin	37.39 kB	38.15 kB	+774 B	+2.0%	—	🔺
/audio/minimal-skin.tailwind	37.89 kB	38.59 kB	+721 B	+1.9%	—	🔺
/audio/skin	38.67 kB	39.03 kB	+368 B	+0.9%	—	🔺
/audio/skin.tailwind	39.08 kB	39.55 kB	+474 B	+1.2%	—	🔺
/live-video/minimal-skin	43.93 kB	44.65 kB	+740 B	+1.6%	—	🔺
/live-video/minimal-skin.tailwind	44.47 kB	45.21 kB	+764 B	+1.7%	—	🔺
/live-video/skin	43.85 kB	44.30 kB	+456 B	+1.0%	—	🔺
/live-video/skin.tailwind	44.40 kB	44.89 kB	+499 B	+1.1%	—	🔺
/live-audio/minimal-skin	30.18 kB	30.77 kB	+606 B	+2.0%	—	🔺
/live-audio/minimal-skin.tailwind	29.56 kB	30.13 kB	+578 B	+1.9%	—	🔺
/ui/audio-track-radio-group	—	9.20 kB	—		—	🆕
/ui/menu	17.50 kB	17.81 kB	+315 B	+1.8%	—	🔺
/video (default)	45.07 kB	45.70 kB	+644 B	+1.4%	—	🔺
/video (default + hls)	184.57 kB	185.14 kB	+584 B	+0.3%	—	🔺
/video (minimal)	44.82 kB	45.70 kB	+904 B	+2.0%	—	🔺
/video (minimal + hls)	184.45 kB	185.19 kB	+758 B	+0.4%	—	🔺
/audio (default)	38.61 kB	39.03 kB	+426 B	+1.1%	—	🔺
/audio (minimal)	37.46 kB	38.13 kB	+686 B	+1.8%	—	🔺

Presets (7)

Entry	Initial
/video (default)	45.70 kB
/video (default + hls)	185.14 kB
/video (minimal)	45.70 kB
/video (minimal + hls)	185.19 kB
/audio (default)	39.03 kB
/audio (minimal)	38.13 kB
/background	4.20 kB

Media (10)

Entry	Initial
/media/background-video	1.14 kB
/media/container	1.72 kB
/media/dash-video	214.74 kB
/media/hlsjs-video	141.28 kB
/media/mux-audio	163.72 kB
/media/mux-video	163.70 kB
/media/native-hls-video	9.05 kB
/media/simple-hls-audio-only	17.15 kB
/media/simple-hls-video	18.69 kB
/media/vimeo-video	12.31 kB

Players (5)

Entry	Initial
/video/player	8.22 kB
/audio/player	5.38 kB
/background/player	3.92 kB
/live-video/player	7.64 kB
/live-audio/player	5.39 kB

Skins (30)

Entry	Type	Initial
/video/minimal-skin.css	css	5.71 kB
/video/skin.css	css	5.68 kB
/video/minimal-skin	js	45.67 kB
/video/minimal-skin.tailwind	js	46.35 kB
/video/skin	js	45.69 kB
/video/skin.tailwind	js	46.49 kB
/audio/minimal-skin.css	css	3.85 kB
/audio/skin.css	css	3.76 kB
/audio/minimal-skin	js	38.15 kB
/audio/minimal-skin.tailwind	js	38.59 kB
/audio/skin	js	39.03 kB
/audio/skin.tailwind	js	39.55 kB
/background/skin.css	css	133 B
/background/skin	js	1.14 kB
/live-video/minimal-skin.css	css	5.71 kB
/live-video/skin.css	css	5.68 kB
/live-video/minimal-skin	js	44.65 kB
/live-video/minimal-skin.tailwind	js	45.21 kB
/live-video/skin	js	44.30 kB
/live-video/skin.tailwind	js	44.89 kB
/live-audio/minimal-skin.css	css	3.85 kB
/live-audio/skin.css	css	3.76 kB
/live-audio/minimal-skin	js	30.77 kB
/live-audio/minimal-skin.tailwind	js	30.13 kB
/live-audio/skin	js	31.79 kB
/live-audio/skin.tailwind	js	31.29 kB
/global.css	css	176 B
/shared.css	css	104 B
/tailwind.css	css	228 B
/skin-element	js	1.45 kB

UI Components (39)

Entry	Initial
/ui/airplay-button	2.36 kB
/ui/alert-dialog	2.45 kB
/ui/alert-dialog-close	2.22 kB
/ui/alert-dialog-description	2.17 kB
/ui/alert-dialog-title	2.13 kB
/ui/audio-track-radio-group	2.87 kB
/ui/buffering-indicator	2.27 kB
/ui/captions-button	2.41 kB
/ui/captions-radio-group	2.76 kB
/ui/cast-button	2.31 kB
/ui/compounds	2.96 kB
/ui/controls	2.70 kB
/ui/error-dialog	2.73 kB
/ui/fullscreen-button	2.32 kB
/ui/hotkey	2.35 kB
/ui/menu	2.75 kB
/ui/mute-button	2.34 kB
/ui/pip-button	2.35 kB
/ui/play-button	2.36 kB
/ui/playback-rate-button	2.33 kB
/ui/playback-rate-radio-group	2.77 kB
/ui/popover	2.68 kB
/ui/poster	2.19 kB
/ui/quality-radio-group	2.77 kB
/ui/seek-button	2.27 kB
/ui/seek-indicator	2.37 kB
/ui/seek-indicator-value	450 B
/ui/slider	2.74 kB
/ui/status-announcer	2.26 kB
/ui/status-indicator	2.27 kB
/ui/status-indicator-value	384 B
/ui/thumbnail	2.16 kB
/ui/time	2.71 kB
/ui/time-slider	2.75 kB
/ui/tooltip	2.67 kB
/ui/volume-indicator	2.32 kB
/ui/volume-indicator-fill	379 B
/ui/volume-indicator-value	399 B
/ui/volume-slider	2.75 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react

Path	Base initial	PR initial	Diff	%	Lazy
/video/minimal-skin	37.39 kB	38.16 kB	+792 B	+2.1%	—	🔺
/video/minimal-skin.tailwind	43.40 kB	44.19 kB	+807 B	+1.8%	—	🔺
/video/skin	37.31 kB	37.81 kB	+511 B	+1.3%	—	🔺
/video/skin.tailwind	43.30 kB	43.76 kB	+466 B	+1.1%	—	🔺
/audio/minimal-skin	30.30 kB	30.65 kB	+356 B	+1.1%	—	🔺
/audio/minimal-skin.tailwind	32.37 kB	32.75 kB	+383 B	+1.2%	—	🔺
/audio/skin	30.24 kB	30.60 kB	+370 B	+1.2%	—	🔺
/audio/skin.tailwind	34.38 kB	34.75 kB	+371 B	+1.1%	—	🔺
/live-video/minimal-skin	32.93 kB	33.29 kB	+369 B	+1.1%	—	🔺
/live-video/minimal-skin.tailwind	38.84 kB	39.23 kB	+394 B	+1.0%	—	🔺
/live-video/skin	32.91 kB	33.27 kB	+363 B	+1.1%	—	🔺
/live-video/skin.tailwind	38.92 kB	39.22 kB	+310 B	+0.8%	—	🔺
/ui/audio-track	—	6.52 kB	—		—	🆕
/ui/menu	17.66 kB	18.01 kB	+365 B	+2.0%	—	🔺
/video (default)	37.39 kB	37.83 kB	+452 B	+1.2%	—	🔺
/video (default + hls)	175.57 kB	176.12 kB	+559 B	+0.3%	—	🔺
/video (minimal)	37.47 kB	38.18 kB	+733 B	+1.9%	—	🔺
/video (minimal + hls)	175.86 kB	176.62 kB	+773 B	+0.4%	—	🔺
/audio (default)	30.38 kB	30.67 kB	+305 B	+1.0%	—	🔺
/audio (minimal)	30.39 kB	30.75 kB	+376 B	+1.2%	—	🔺

Presets (7)

Entry	Initial
/video (default)	37.83 kB
/video (default + hls)	176.12 kB
/video (minimal)	38.18 kB
/video (minimal + hls)	176.62 kB
/audio (default)	30.67 kB
/audio (minimal)	30.75 kB
/background	754 B

Media (9)

Entry	Initial
/media/background-video	575 B
/media/dash-video	213.24 kB
/media/hlsjs-video	139.79 kB
/media/mux-audio	162.25 kB
/media/mux-video	162.33 kB
/media/native-hls-video	7.39 kB
/media/simple-hls-audio-only	15.56 kB
/media/simple-hls-video	17.15 kB
/media/vimeo-video	10.58 kB

Skins (27)

Entry	Type	Initial
/tailwind.css	css	228 B
/video/minimal-skin.css	css	5.62 kB
/video/skin.css	css	5.57 kB
/video/minimal-skin	js	38.16 kB
/video/minimal-skin.tailwind	js	44.19 kB
/video/skin	js	37.81 kB
/video/skin.tailwind	js	43.76 kB
/audio/minimal-skin.css	css	3.72 kB
/audio/skin.css	css	3.62 kB
/audio/minimal-skin	js	30.65 kB
/audio/minimal-skin.tailwind	js	32.75 kB
/audio/skin	js	30.60 kB
/audio/skin.tailwind	js	34.75 kB
/background/skin.css	css	90 B
/background/skin	js	272 B
/live-video/minimal-skin.css	css	5.62 kB
/live-video/skin.css	css	5.57 kB
/live-video/minimal-skin	js	33.29 kB
/live-video/minimal-skin.tailwind	js	39.23 kB
/live-video/skin	js	33.27 kB
/live-video/skin.tailwind	js	39.22 kB
/live-audio/minimal-skin.css	css	3.72 kB
/live-audio/skin.css	css	3.62 kB
/live-audio/minimal-skin	js	21.94 kB
/live-audio/minimal-skin.tailwind	js	24.94 kB
/live-audio/skin	js	21.98 kB
/live-audio/skin.tailwind	js	25.09 kB

UI Components (33)

Entry	Initial
/ui/airplay-button	2.15 kB
/ui/alert-dialog	2.08 kB
/ui/audio-track	2.11 kB
/ui/buffering-indicator	2.07 kB
/ui/captions-button	2.17 kB
/ui/captions-radio-group	2.06 kB
/ui/cast-button	2.15 kB
/ui/controls	1.98 kB
/ui/error-dialog	2.21 kB
/ui/fullscreen-button	2.09 kB
/ui/gesture	2.17 kB
/ui/hotkey	2.13 kB
/ui/live-button	2.07 kB
/ui/menu	2.21 kB
/ui/mute-button	2.24 kB
/ui/pip-button	2.16 kB
/ui/play-button	2.14 kB
/ui/playback-rate	2.03 kB
/ui/playback-rate-button	2.14 kB
/ui/popover	2.53 kB
/ui/poster	2.01 kB
/ui/quality	2.05 kB
/ui/seek-button	2.15 kB
/ui/seek-indicator	1.98 kB
/ui/slider	2.18 kB
/ui/status-announcer	2.03 kB
/ui/status-indicator	2.03 kB
/ui/thumbnail	1.95 kB
/ui/time	1.95 kB
/ui/time-slider	2.23 kB
/ui/tooltip	2.61 kB
/ui/volume-indicator	1.98 kB
/ui/volume-slider	2.18 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (14)

Entry	Initial
.	9.22 kB
/dom	17.44 kB
/dom/media/custom-media-element	2.09 kB
/dom/media/dash	209.07 kB
/dom/media/google-cast	4.04 kB
/dom/media/hls-js	135.68 kB
/dom/media/media-host	1.25 kB
/dom/media/media-played-ranges	576 B
/dom/media/mux	151.26 kB
/dom/media/native-hls	3.05 kB
/dom/media/simple-hls	16.47 kB
/dom/media/simple-hls-audio-only	14.92 kB
/dom/media/vimeo	9.86 kB
/media/predicate	563 B

🏷️ @videojs/element — no changes

Entries (2)

Entry	Initial
.	996 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Initial
.	1.39 kB
/html	696 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Initial
/array	104 B
/dom	2.26 kB
/events	319 B
/function	327 B
/object	275 B
/predicate	265 B
/string	231 B
/style	190 B
/time	478 B
/number	158 B

📦 @videojs/spf — no changes

Entries (4)

Entry	Initial
.	4.45 kB
/dom	6.33 kB
/hls	15.37 kB
/background-video	12.85 kB

---

ℹ️ How to interpret

JS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current initial sizes.

[luwes]

approving but menu needs a little polish,

#1723

https://v10-sandbox-git-feat-audio-tracks-menu-mux.vercel.app/?platform=html&styling=css&preset=hls-video&skin=default&source=hls-2&autoplay=0&muted=0&loop=0&preload=metadata

[sampotts]

approving but menu needs a little polish

Yeah, totally agree. I just didn't want to make this PR huge so I did that in another PR (which it looks like you've already seen!) 👍🏼