audio

The block displays an audio playback component on the screen.

Properties

src: { url, durationSeconds }

Information about the audio file

• url *: string
  URL of the audio file location.

• durationSeconds: number
  Duration of the audio in seconds.

title: string

Title of the block. It is styled in bold.

subTitle: string

Subtitle of the block.

style

Changes the appearance, positioning, and geometry of the block.

• width, maxWidth, minWidth
  Width of the block. More details.

• height, maxHeight, minHeight
  Height of the block. More details.

• margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft
  External margins of the block. More details.

• position
  Positioning method of the block: relative or absolute. More details.

• top, right, bottom, left
  Offset from the original position. More details.

• border
  Setting borders for the block on all four sides: thickness, style, and color. More details.

• borderTop, borderRight, borderBottom, borderLeft
  Setting individual borders for the sides of the block: thickness and color. More details.

• borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius
  Rounding the corners of the borders. More details.

• borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
  Thickness of the borders. More details.

• borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
  Color of the borders. More details.

• backgroundColor
  Background color of the block. More details.

• backgroundGradient
  Background gradient of the block. More details.

• opacity
  Opacity of the entire block with its content. More details.

• elevation
  Shadow height. More details.

• shadowColor
  Shadow color of the block. More details.

• flexBasis
  Initial size of the block along the main axis of the container. More details.

• flexGrow
  Growth factor of the block along the main axis of the container. More details.

• flexShrink
  Shrinkage factor of the block along the main axis of the container. More details.

• alignSelf
  Alignment of a specific block across the main axis of the container. More details.

Examples

<audio
  src={{
    url: "https://fs.chatium.io/get/audio_ANlDoIs0xm.d12.wav",
    durationSeconds: 11
  }}
  title="Drum solo"
  subTitle="Enjoy the groove"
/>