<media-audio-track-menu>

A menu for audio tracks.

<media-controller>
  <mux-video
    playsinline crossorigin
    slot="media"
    playback-id="Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008"
  ></mux-video>
  <media-audio-track-menu hidden anchor="auto"></media-audio-track-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-audio-track-menu-button></media-audio-track-menu-button>
  </media-control-bar>
</media-controller>
<media-controller>
  <mux-video
    playsinline crossorigin
    slot="media"
    playback-id="Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008"
  ></mux-video>
  <media-audio-track-menu hidden id="menu1" anchor="menu-button1"></media-audio-track-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-audio-track-menu-button id="menu-button1" invoketarget="menu1"></media-audio-track-menu-button>
  </media-control-bar>
</media-controller>
Name Description
Default slotted elements.node
header An element shown at the top of the menu.
checked-indicator An icon element indicating a checked menu-item.
Name Type Description
disabled boolean The Boolean disabled attribute makes the element not mutable or focusable.
mediacontroller string The element `id` of the media controller to connect to (if not nested within).

The media UI attributes will be set automatically by the controller if they are connected via nesting or the mediacontroller attribute. Only set these attributes manually if you know what you're doing.

Name Type Description
mediaaudiotrackenabled string Set to the enabled audio track.
mediaaudiotracklist string Set to the audio track list.
Name Default Description
--media-primary-color rgb(238 238 238) Default color of text / icon.
--media-secondary-color rgb(20 20 30 / .8) Default color of background.
--media-text-color var(--media-primary-color, rgb(238 238 238)) color of text.
--media-control-background var(--media-secondary-color, rgb(20 20 30 / .8)) background of control.
--media-menu-display inline-flex display of menu.
--media-menu-layout Set to row for a horizontal menu design.
--media-menu-flex-direction row flex-direction of menu.
--media-menu-gap .25em gap between menu items.
--media-menu-background var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))) background of menu.
--media-menu-border-radius border-radius of menu.
--media-menu-border none border of menu.
--media-menu-transition-in visibility 0s, opacity .2s ease-out, transform .15s ease-out, left .2s ease-in-out, min-width .2s ease-in-out, min-height .2s ease-in-out transition of menu when showing.
--media-menu-transition-out visibility .15s ease-in, opacity .15s ease-in, transform .15s ease-in transition of menu when hiding.
--media-menu-visibility visible visibility of menu when showing.
--media-menu-hidden-visibility hidden visibility of menu when hiding.
--media-menu-max-height var(--_menu-max-height, 300px) max-height of menu.
--media-menu-hidden-max-height var(--media-menu-max-height, var(--_menu-max-height, 300px)) max-height of menu when hiding.
--media-menu-opacity 1 opacity of menu when showing.
--media-menu-hidden-opacity 0 opacity of menu when hiding.
--media-menu-transform-in translateY(0) scale(1) transform of menu when showing.
--media-menu-transform-out translateY(2px) scale(.99) transform of menu when hiding.
--media-font var(--media-font-weight, normal) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif) font shorthand property.
--media-font-weight normal font-weight property.
--media-font-family helvetica neue, segoe ui, roboto, arial, sans-serif font-family property.
--media-font-size 14px font-size property.
--media-text-content-height var(--media-control-height, 24px) line-height of text.
--media-icon-color var(--media-primary-color, rgb(238 238 238)) fill color of icon.
--media-menu-icon-height var(--media-control-height, 24px) height of icon.
--media-menu-item-checked-indicator-display none display of check indicator.
--media-menu-item-checked-background rgb(255 255 255 / .2) background of checked menu item.
--media-menu-item-max-width max-width of menu item text.