Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add an Audio Music Player Widget in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add an audio music player widget in WordPress?

A music player is a great way to share songs, podcasts, interviews, and other audio files with your audience. This can help to create a more interesting and engaging experience on your site.

In this article, we will show you how you can add an audio music player in WordPress.

How to add an audio music player widget in WordPress

Why Add an Audio Music Player Widget in WordPress

A music player lets visitors listen to audio directly on your WordPress website.

If you’re a podcaster or a musician, then featuring audio on your own site can keep your visitors and fans up to date with your work.

It can also encourage people to visit your website directly rather than playing your audio on other platforms. Once these people are on your site, you may be able to make more money by showing ads on your WordPress blog or selling the audio file as a digital download.

Even if you don’t create any original audio, embedding content from third-party platforms such as Spotify is an easy way to create a more engaging website. This can keep visitors on your site for longer and make the experience more fun.

That being said, let’s take a look at how you can add an audio music player in WordPress. Simply use the quick links below to jump straight to the method you want to use.

Method 1. How to Add an Audio Music Player Widget Using the Audio Block (Easy)

With this method you can create a simple audio music player using the built-in WordPress Audio block. You can use the block to play any .mp3, .m4a, .ogg, or .wav file.

The audio player is very simple compared to most audio player plugins. It has a play/pause button, volume controls, a download button, and a button to change the playback speed.

A music player widget created using the Audio block

The built-in Audio block is a good choice if you want to add a few short audio clips to your site, and don’t need any advanced features.

If you embed content from a supported third-party platform such as Spotify or SoundCloud then the Audio block will show the playback controls for that platform. It may also show some extra content from the platform such as the artist’s name and the cover image.

For example, here is an Audio block with embedded SoundCloud content.

Audio player with embedded SoundCloud content

To add a simple audio music player to your WordPress website, open any page or post. Then, click on the + icon.

In the popup that appears, type ‘Audio’ to find the right block. You can then simply click on the Audio block to add it to your page.

The built-in WordPress audio block

At this point you can either add an audio file or embed an audio clip from another platform.

Note: In most cases we recommend hosting your audio and video files on a third party site for many reasons, including quality optimization and saving on bandwidth. Here’s why you should never upload a video to WordPress.

To add an audio file from your computer, click on ‘Upload’ and then choose the file that you want to use. Another option is to click on ‘Media Library’ and then choose a file from the WordPress media library.

Uploading an audio file to your WordPress website

If you upload the full audio then you may want to give visitors the option to support your work as a musician or podcaster by sending you a donation. For a step-by-step walkthrough, please see our guide on how to add a Stripe donate button in WordPress.

Do you want to embed audio from another platform instead?

This is similar to how you embed videos in WordPress where you just paste the URL of a YouTube video and WordPress embeds it automatically.

Just be aware that most platforms only embed a preview of the full audio file. The block may even encourage people to leave your website and visit the third-party platform, in order to hear the full audio.

In the following image, the Audio block is driving visitors towards the Spotify website.

A Spotify playlist embedded in WordPress

If you’re a musician, then this might increase your royalties by encouraging visitors to play your content on other platforms. However, it can also drive people away from your website and onto the other platforms.

To embed audio from a third-party platform, then start by clicking on ‘Insert from URL.’

This opens a small ‘Paste or type URL’ bar.

Pasting an audio file using a URL

You can now enter the URL of the audio clip that you want to embed on your WordPress blog.

Typically, you just need to visit the song or audio that you want to embed, and then open its ‘Share’ settings.

After that, you can copy the URL provided.

As an example, let’s see how you can embed any Spotify song on your site. To start, find the song or playlist that you want to add to your WordPress website.

Then, just click on the three dots that Spotify shows next to the playlist or song.

Adding Spotify audio to a WordPress website

Once you’ve done that, click on Share » Copy Song Link.

To add the audio to a music player widget, just paste the link into the Audio block.

Spotify's 'Share' URL

In our Spotify example, WordPress will turn the Audio block into a Spotify block. This change happens automatically, so it’s not something you need to worry about.

The WordPress Spotify block

After adding an audio file, you can click on the Audio block to see what settings you can configure for that block.

The settings you see may vary depending on whether you uploaded an audio file or embedded a preview from a third-party site. For example, you can often set the audio to autoplay by clicking on the ‘Autoplay’ toggle.

The WordPress autoplay and loop settings

Most of these settings are self-explanatory so it’s a good idea to spend some time trying the different settings to see what works best for your site.

When you’re happy with how the block is set up, you can update or publish the page.

Now if you visit the page on your site, you’ll see the audio music player live. You can also listen to the audio using the block’s playback control buttons.

Method 2. How to Add an Audio Music Player Widget Using a Plugin (More Customizable)

The built-in WordPress audio block is a quick and easy way to create a simple audio player. However, it does have its limits particularly when it comes to customizing the player and the playback experience.

There is also no central place where you can manage your audio players. This means you can’t use the same player multiple times across your site.

If you do want more advanced features and re-usable audio players, then we recommend Html5 Audio Player. This plugin can play any mp3, .wav, or .ogg file.

The plugin can only play one audio file per player. However, you can create as many audio players as you want so you can still play lots of different tracks across your site.

You can even add multiple audio players to the same page.

Multiple audio players on a single page

First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you’re ready to build your first audio player by going to Html5 Audio Player » Html5 Audio Player.

Here, go ahead and click on the ‘Add Audio Player’ button.

Adding an audio player to your WordPress website

To start, type a name for the audio player into the field that shows ‘Add title.’

This is just for your reference so you can use any title you want.

Creating an audio player widget using a plugin

Once you’ve done that, scroll to the ‘Player Configuration’ section.

Here, you can add an audio file to the player by clicking on the ‘Add Audio’ button.

Adding an audio file to the HTML5 player

You can now select any audio file from the media library or upload a file from your computer.

After choosing a file, you’re ready to customize the audio player. By default, the visitor just needs to click on the Play button and the audio will start playing with the volume already turned up.

This is how most visitors expect an audio player to act, so you’ll typically want to use these default settings.

There are also options to mute the audio by default, autoplay, repeat, and more.

Once you’re happy with how the player is set up, just scroll to the top of the screen and click on the ‘Save’ button.

Adding a new audio player to your WordPress website

Then you can add the audio player to your site using either shortcode or the HTML5 Audio Player block.

The block is the easiest method. However, if you do want to place the player using shortcode, then you’ll find the code towards the top of the screen.

Placing an audio player widget using shortcode

For more details on how to place the shortcode, you can see our guide on how to add a shortcode in WordPress.

To add the audio music player using a block, open any page or post. You can now click on the + button.

In the popup that appears, type ‘HTML5 Audio Player’ to find the right block. Once you click on the ‘HTML5 Audio Player – Insert’ block, it will add the block to your page.

Adding an audio player block to your WordPress site

Next, open the dropdown that shows ‘Select a Player’ to see a list of all the audio players that you’ve created.

You can now click on an audio player to add it to the page or post.

An HTML5 WordPress audio block

The WordPress page editor doesn’t show the audio player.

However if you click on the Preview button then you’ll be able to see how the player will look to the people who visit your website. You can even listen to the audio and test the different playback buttons.

Previewing the audio music widget

When you’re happy with how the audio player looks and functions, you can update or publish the page.

Now if you visit this page on your WordPress website, you’ll see the audio player live.

Do you want to add other audio tracks to your site? Then you can simply follow the process described above to create more audio players and add them to your WordPress website.

We hope this article helped you learn how to add an audio player widget in WordPress. You can also go through our guide on the best web push notification software and how to create an email newsletter.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

6 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Brian Visagie says

    Hi, I subscribe to WPBeginner
    and appreciate your input to the WordPress community – I regard it as
    invaluable.

    How is it then that you, sir, in the present unsafe and hacker
    infested internet environment, recommend plugins (a widget in this case), that
    are not up to date?

    I get scores of bruteforce attacks everyday on my
    websites and I regard the use and recommendation of out-dated plugins as
    irresponsible.

Leave a Reply to TiBs Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.