PAC Media Player: audio
The same player as the YouTube sample and the local MP4 sample: identical markup, styles, and PAC modules, configured for a local audio file. The controls, their names, and the keyboard map are the video player's, without the video and the controls that only a video has.
Sample player
Configuration
Only the source differs from the YouTube sample; the behavior described in that page's How It Works applies here, minus what only a video has.
- A JSON block in the page head,
script type="application/json" data-pac-media-player-config, supplies the source:"type": "audio"with a URL and title. It overridesconfig.jsonsection by section, so the labels and colors still come from that file. - The sample is the sound track of the local MP4 sample, copied out of the clip unchanged, in
media/beside the player. Replace it with approved client audio before delivery. - The
video-playermarkup is identical to the other sample pages' apart from comments, and the browser suite checks that.js/player-config.jscreates anaudioelement for this source and setsdata-media-type="audio"on the player.
What an audio player has
- The same controls in the same order, with the same names and keyboard map: skip back, play/pause, skip forward, mute, volume, time, seek, playback rate, and audio track.
- No video stage, and no captions, picture-in-picture, or fullscreen controls. They are not part of an audio player, so they are left out entirely rather than shown as unavailable. Publish a transcript beside the player for audio content.
- The bar uses the row's width: one row where every control fits, with the volume slider; otherwise rows grouped so that no row holds a single control.
- Volume is unavailable on iOS Safari for any source, because only the device buttons set it; the volume slider says so and stays in the accessibility tree, and Mute keeps working.
- The audio-track control stays visible, disabled, and named unavailable because this file has one audio track.
- No request leaves this origin, and the YouTube media element is never loaded.