Skip to content

Audio Block

The Audio Block allows you to embed an audio player directly within a page or post. It supports uploaded audio files from the Media Library as well as files hosted externally.

WordPress renders the block using the browser’s native audio player, which ensures compatibility across modern browsers and devices. This makes the block a reliable option for podcasts, recorded lectures, interviews, or other audio content.

Example

The importance of audio accessibility. Download transcript

Options

Alignment

The Audio block may be aligned within a container.

Align Left

The importance of audio accessibility. Download transcript

This audio block is aligned to the left of the paragraph if space allows. It will remain floated until the paragraph text becomes too crowded to display properly at narrow viewports.

Align Right

The importance of audio accessibility. Download transcript

This audio block is aligned to the right of the paragraph if space allows. It will remain floated until the paragraph text becomes too crowded to display properly at narrow viewports.

Align Center

This audio block is aligned to the center.

The importance of audio accessibility. Download transcript

Accessibility

The Audio Block relies on the HTML <audio> element, which has strong built-in accessibility support. Because the browser controls the audio interface, most assistive technologies already understand how to interact with the player.

  • Provide descriptive context near the audio player so users understand what the recording contains
  • Avoid autoplay. Automatically playing audio can be disruptive and creates accessibility issues for screen reader users.
  • Offer a transcript when possible. Transcripts improve accessibility for users who are deaf or hard of hearing and also benefit search indexing.
  • Ensure any surrounding controls or links are keyboard accessible.

Notes

  • Supported formats depend on the browser but typically include MP3, OGG, and WAV.
  • Because the player UI is controlled by the browser, its styling options are limited.
  • Audio files can increase page load time if they are very large. When possible, optimize file sizes before uploading.
  • Consider hosting large audio libraries on dedicated media services or CDNs when appropriate.

Documentation

For a detailed overview and usage examples, visit the Audio Block Documentation.