RDS/Media

Media Elements

Audio players, video embeds, and transport controls purpose-built for music and multimedia platforms.

rds-media-coreHTML5 Audio/VideoMusic-Native
01AudioPlayer

SoundHelix Song 1

0:00
0:00
PROPTYPEDEFAULTDESCRIPTION
srcstring—Audio source URL (MP3, WAV, OGG, etc.)
titlestring—Track title shown above the transport bar
posterstring—Cover art image URL
onPlay() => void—Called when playback starts
onPause() => void—Called when playback pauses
onEnded() => void—Called when the track ends
02VideoEmbed
PROPTYPEDEFAULTDESCRIPTION
urlstring—Video URL — YouTube, Vimeo, or direct file. Source type auto-detected.
type"auto" | "youtube" | "vimeo" | "file" | "hls" | "mux""auto"Force a specific source type
aspectRatio"16:9" | "9:16" | "4:3" | "1:1" | "4:5" | "21:9""16:9"Video aspect ratio
titlestring—Iframe title for accessibility
autoplaybooleanfalseAuto-play on mount (most browsers require muted)
mutedbooleanfalseMute audio
loopbooleanfalseLoop playback
03Transport Buttons
PROPTYPEDEFAULTDESCRIPTION
action"play" | "pause" | "stop" | "skip-back" | "skip-forward" | "mute" | "unmute" | "fullscreen" | "repeat" | "shuffle"—The transport action — determines the icon
size"sm" | "default" | "lg""default"Button size
isActivebooleanfalseActive state (e.g. for repeat/shuffle toggles)
04Timeline Control
0:47
3:42
PROPTYPEDEFAULTDESCRIPTION
currentTimenumber—Current playback position in seconds
durationnumber—Total duration in seconds
onSeek(time: number) => void—Called when the user scrubs to a new position
markersTimelineMarker[][]Comment or chapter markers shown on the timeline
showTimeLabelsbooleantrueShow current time and duration labels
05Volume Control
PROPTYPEDEFAULTDESCRIPTION
volumenumber—Volume level from 0 to 1
mutedboolean—Whether audio is currently muted
onVolumeChange(volume: number) => void—Called when the volume slider changes
onMuteToggle() => void—Called when the mute button is clicked
06Media Transport Bar
0:31
3:05
// With MediaProvider — wires state automaticallyimport { MediaProvider, RdsMediaTransportBar } from "@meinc/rds-media-core"<MediaProvider type="audio" source={{ id: "1", src: "/track.mp3", title: "My Track" }}>  <RdsMediaTransportBar /></MediaProvider>
07Installation
bash
npm install @meinc/rds-media-core
import {  AudioPlayer,  VideoEmbed,  RdsTransportButton,  RdsTimelineControl,  RdsVolumeControl,  RdsMediaTransportBar,  MediaProvider,  useMediaElementCore,} from "@meinc/rds-media-core"