How to Add a WordPress Music Player Widget

Are you wanting to add music somewhere on your website, like the sidebar? Well, you’re in luck, as this article will explain how to add a WordPress music player widget, and why it might be a good idea for some people to do.

Before explaining what a WordPress music player widget is, you need to know what a widget is. A WordPress widget is something you can add content in a specific area of your website, like a sidebar. WordPress comes built-in with a few types of widgets like being able to add HTML, text, navigation menus, images, and more. A WordPress music player widget is a type of media content that you can embed in any widgetized area.

When you add a WordPress music player widget to your site, you could potentially deliver a better experience to your visitors. This type of widget is perfect for podcasters, musicians, and even radio stations that want to broadcast their program or feature their talent. You can even add your Spotify playlist to a widget!

There are two methods to learn how to add a WordPress Music Player Widget:

1. Using the audio widget
2. Using a plugin

1. How to Add a WordPress Music Player Widget Using the Audio Widget

Depending on the theme you’re using and if you’re using the default Gutenberg block editor, you will still be able to manage your widgets. For this tutorial the theme uses Gutenberg and still allows you to edit widgets in the old way, without the content block editor.

Here are the steps to add a WordPress music player widget using the audio widget:

• Go to Appearance > Widgets.
• Choose the Audio Widget.
• Select what sidebar to add the widget to.
• Add an audio file.
• Test if audio is working on the front of the website.

Go to Appearance > Widgets.

Navigate to Appearance > Widgets in your WordPress dashboard. This is where you’ll find all the available sidebars and various widgets you can position within them.

Choose the Audio Widget.

Choose the Audio widget located under Available Widgets.

Select what sidebar to add the widget to.

The down area gives you a drop down to tell the widget where you want it to go. Select the sidebar you want the audio to be in, and then click the blue Add Widget button.

This will add the widget to the sidebar.

Add an audio file.

Once you’ve added the widget, you will need to add an audio file to it. Click on the Add Audio.

This will open the WordPress Media Library uploader window. From there you can either upload a MP3 file, paste an audio link from an outside site, or select a file that is already within your WordPress Media Library. Please note that if you are using an audio that’s linked from the other site and they do not have HTTPS in the URL, and your site has SSL (making the link HTTPS), then it will show the site as mixed content. This means you will need to use audio that comes from a website with a valid SSL certificate installed.

You can either just select the file or choose to copy and paste the URL, like from the image above.

Test if audio is working on the front of the website.

When you’ve added the widget, it’s time to test to see if it is working on the frontend of the website. Before checking, make sure to clear your website’s cache, especially if you have a cache plugin installed.

2. How to Add a WordPress Music Player Widget Using a Plugin

For this method on how to add a WordPress music player widget using a plugin, we’ll be using the Html5 Audio Player

• Install Html5 Audio Player.
• Add audio or build a playlist.
• Copy shortcode for audio player and make sure to save it.
• Go to Appearance > Widgets.
• Add the Text widget to your sidebar and save.
• Test to make sure the player is working on your website.

Install Html5 Audio Player.

Go to the Plugins section within your WordPress admin area, and then click on Add New. Search for “html5 audio player”. It should come up as the first listing on the left. Click on the Install button and then again when the button reads as Activate.

Add audio or build a playlist.

The plugin adds a new main level menu item called Html5 Audio Player. Navigate to that link and click on Add New Audio Player.

You will be sent to a page where you can insert your audio player’s name, and add your audio files. You can click the blue Add Audio button to upload or paste a link of a MP3 you want in the music player.

It’s important to note that a couple of the settings allow you to adjust whether you want to autoplay your WordPress music player widget. It’s important to note that the Google Chrome browser blocks most autoplaying from occurring. Also, you should just consider letting your visitors choose whether they want to play your audio.

Copy shortcode for audio player and make sure to save it.

There is a section outlined in purple that gives you a couple ways to add the shortcode for your WordPress music player widget. Make sure to copy the code and then click on the save button to the top right.

Go to Appearance > Widgets.

You will need to add the shortcode to a sidebar. For this tutorial you’ll use the Text widget. Please note that if your theme uses 100% using the block widget, you can choose the block widget and search for the Html5 Audio Player. It will add the shortcode for you in a similar manner.

Add the Text widget to your sidebar, paste the shortcode, and save.

Paste the shortcode to your text widget and then save it.

Test to make sure the player is working on your website.

Don’t forget to test your WordPress music player widget by visiting the front of your website. If it’s not working, then you might have to troubleshoot WordPress to see if there’s a conflict with another plugin or the theme.

After adding the music player widget, you can adjust the audio player’s width in case it’s too long or too short within the sidebar area.

Adding a WordPress music player widget to your web page’s certainly can make your site a bit more entertaining. Just make sure that you’re not adding too many audio files to your site, as it could slow down the site. That being said, when you’re testing to see if the music player works, also test for site speed and make sure to optimize your WordPress site.