Component Catalog

AudioPlayer

Native HTML5 audio player with optional description.

A2UI → Nuxt UI Mapping

A2UI PropertyHTML Result
url<audio> src attribute
descriptionLabel text above the player

Example JSONL

{"version":"v0.10","createSurface":{"surfaceId":"audio_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"audio_demo","components":[
  {"id":"root","component":"Column","children":["track"]},
  {"id":"track","component":"AudioPlayer","url":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3","description":"SoundHelix — Song 1"}
]}}

Properties

PropertyTypeRequiredDefaultDescription
urlstringAudio source URL
descriptionstringLabel text displayed above the player

Rendering Details

  • Uses native <audio> element with controls enabled
  • Optional description label above the player
  • Full-width layout for consistency

Try It

Copy the JSONL above and paste it in the Playground Paste tab.