---
title: "How to Add an Audio Player in WordPress?"
url: https://nexterwp.com/docs/add-an-audio-player-in-wordpress/
date: 2024-12-09
modified: 2026-08-18
author: "Aditya Sharma"
description: "If you want to showcase your latest podcast episode or feature a music track for your visitors, having an audio player on your site can greatly enhance the overall user..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-an-Audio-Player-in-WordPress_-1024x519.jpg
word_count: 602
---

# How to Add an Audio Player in WordPress?

## Key Takeaways

- Nexter Blocks requires the default WordPress Block editor, the Nexter Blocks plugin, and the PRO version to use the Audio Player block.
- Audio Player supports multiple styles, playlist creation, and two audio sources: self hosted and external.
- Audio Player accepts .mp3, .wav, .ogg, .flac, and .m4a files, and the External option uses an audio file URL.
- Audio Player lets users set a predefined style, add Song Title and Song Author fields, adjust Max-width and Default Volume, and style controls, tracker, playlist, and background from the Style tab.

If you want to showcase your latest podcast episode or feature a music track for your visitors, having an audio player on your site can greatly enhance the overall user experience.

With the  Audio Player block from Nexter Blocks, you can easily add an audio player to your WordPress website.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-audio-music-player/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a Premium block, and you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

- Make sure the Audio Player block is activated. To verify this, visit Nexter → Blocks → and search for Audio Player and activate.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=6q15mPGpVGE

## How to activate the Audio Player Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name and turn** on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/12/Nexter-Blocks-Audio-Player-Activation.png)

## Key Features

- **Multiple styles** - You can easily choose from multiple styles.

- **Add playlist** - You can easily add a playlist.

- **Multiple sources** - You can add audio from two sources, self hosted or external sources.

## How to Use the Audio Player Block?

Add the Audio Player block to the page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/12/audio-player-design-type-1024x192.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

### Audio Player

From the **Style** section, you can select a predefined style.

![](https://nexterwp.com/wp-content/uploads/2024/12/audio-player-layout-new.png)

### Playlist

Here you can add the playlist items. In the **Content** section, by default, you’ll find one repeater item open it -  

In the **Song Title** field, you can add the audio title.

Then in the **Song Author** field, you can add the name of the audio's author.

From the **Source** section, you have to select the source. Here you’ll find two options - 

- **Self Hosted** - With this option you can use audio from your WordPress media library.

- **External** - With this option you can use audio from external sources. This option is useful when your audio files are hosted somewhere else.

> *Note: Supported audio file types .mp3, .wav, .ogg, .flac and .m4a.*

Let’s select External here.

Then in the **URL** field, you have to add the audio file URL.

> *Note: When the Self Hosted option is selected, you have to select the audio file from the File field.*

After that from the **Image** section, you can add an image for the audio.

You can click on the **+ Add Content** button to add more audio, this way you can create an audio playlist.

### Common Setting

In the **Split Text** field, you can add a text between the audio title and the author's name.

![](https://nexterwp.com/wp-content/uploads/2024/12/audio-player-common-setting-new.png)

In the **Max-width** section, you can set the maximum width of the audio player for different devices.

From the **Default Volume** section, you can adjust the default sound level of the audio player.

![](https://nexterwp.com/wp-content/uploads/2024/12/audio-player-default-volume-demo.png)

## How to Style the Audio Player Block?

To style the Audio Player block, you’ll find all options in the Style tab.

**Song Title** - From here, you can manage the audio title typography and color.

![](https://nexterwp.com/wp-content/uploads/2024/12/audio-player-style-tab-new.png)

**Song Author** - From here, you can manage the audio author’s name typography and color.

**Split Text** - From here you can manage the Split Text style.

**Control** - From here, you can style the audio player controls.

**Tracker** - From here, you can style the audio player tracker.

**PlayList** - From here, you can style the audio player playlist.

**Player Background** - From here, you can manage the audio player background style.

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What do I need before adding an audio player in WordPress?**
A: The setup is pretty specific: the default WordPress Block editor has to be active, the Nexter Blocks plugin has to be installed and activated, and the Audio Player block is a Premium block that requires the PRO version of Nexter Blocks. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the Audio Player block only after it is activated in Nexter → Blocks.

**Q: Why isn't the Audio Player block showing up in WordPress?**
A: The usual cause is that the block is still turned off in Nexter → Blocks. The tutorial says to search for Audio Player and activate it there, so if it is missing from the editor, that activation step is the first thing to check. This matters because the block will not appear in the WordPress Block editor until it has been enabled inside Nexter Blocks.

**Q: Can I use external audio files in the WordPress audio player?**
A: The Audio Player block supports two sources: Self Hosted and External. Self Hosted pulls audio from your WordPress media library, while External is for files hosted somewhere else and uses a URL field. That makes it useful for podcasts or tracks stored off-site. Supported file types listed on the page are .mp3, .wav, .ogg, .flac, and .m4a.

**Q: What is the best way to build a playlist with the Audio Player block?**
A: The playlist is built from repeater items in the Content section, so each track gets its own title, author, source, and optional image. The page also notes that you can click + Add Content to add more audio items. That structure matters because it keeps each track organized instead of forcing everything into a single file.

**Q: Should I start from scratch or import a preset template for the audio player?**
A: Design from Scratch gives you full control over the layout, while Import Pre-Designed Template is faster if you want a preset starting point and then customize it. The tutorial mentions both options for the Audio Player block. In practice, templates are better when you want speed, and scratch builds are better when you need a specific layout.

**Q: How do I control the size and volume of the audio player in WordPress?**
A: The Common Setting section handles both of those basics: Max-width sets how wide the player can be on different devices, and Default Volume sets the starting sound level. That combination matters because width affects how the player fits into your layout, while default volume affects how loud it feels when someone first presses play.