// Ported from vercel/ai-elements @ main (packages/elements/src/audio-player.tsx). // Customizations applied on import: import-alias rewrites, RTL physical→logical // class swap, Vercel theme-token sweep. See scripts/registry/port-ai-elements.mjs // for the deterministic transforms — re-run to re-sync against upstream. "use client"; import type { Experimental_SpeechResult as SpeechResult } from "ai"; import { MediaControlBar, MediaController, MediaDurationDisplay, MediaMuteButton, MediaPlayButton, MediaSeekBackwardButton, MediaSeekForwardButton, MediaTimeDisplay, MediaTimeRange, MediaVolumeRange, } from "media-chrome/react"; import type { ComponentProps, CSSProperties } from "react"; import { Button } from "@/components/registry/primitives/core/button"; import { ButtonGroup, ButtonGroupText, } from "@/components/registry/primitives/core/button-group"; import { cn } from "@/lib/registry/cn"; export type AudioPlayerProps = Omit< ComponentProps, "audio" >; export const AudioPlayer = ({ children, style, ...props }: AudioPlayerProps) => ( {children} ); export type AudioPlayerElementProps = Omit, "src"> & ( | { data: SpeechResult["audio"]; } | { src: string; } ); export const AudioPlayerElement = ({ ...props }: AudioPlayerElementProps) => ( // oxlint-disable-next-line eslint-plugin-jsx-a11y(media-has-caption) -- audio player captions are provided by consumer

Audio Player

Showcase

Audio Player