How to Add Audio Player in WordPress Site Without Plugin?

WordPress has an integrated HTML5 audio player to showcase your audio files in simple manner. You can either create a player with single audio or with multiple audios as a playlist. In this article we will explain how to add audio player in WordPress site using default audio shortcode.

  • Using default HTML5 audio player
  • Customizing the audio player
  • Inserting audio player with playlist
  • Customizing playlist shortcode
  • Inserting audio player in widget area

Add Audio in WordPress Without Plugin

WordPress has a built-in audio shortcode for inserting a HTML5 audio player in your posts, pages and widgets. It supports all HTML5 supported file types like .mp3, .egg and .wav.

Inserting a Single Audio File

Similar to any other images and videos, upload your audio file through “Add Media” button in WordPress post editor. After the file is uploaded, enter the track details on the media screen. WordPress allows you to add track details like title of your audio, artist name, album name, caption and description for your audio file as shown below.

Adding Track Details of Audio File in WordPress

Though single file audio player does not use these details on the screen, these details are shown in the playlist. Scroll down to the end of the pane, and check you have selected “Embed Media Player” option. It should be selected from the dropdown against “Embed or Link” under “Attachment Display Settings” section.

Choose Embed Media Player Option

This is an important setting allows WordPress to insert audio player instead of linking to the media file or to the attachment page. Click on the “Insert into post” button to add the file into your WordPress post. WordPress will automatically add HTML5 audio player.

Below is an example of default HTML5 audio player inserted using audio shortcode.

The audio player has minimum controls with play / pause buttons, progress bar showing time duration, volume control and volume bar. The default audio player is responsive and occupy the available width based on the browser’s width. And the published article will have the same audio player as you see inside the post editor.

Customizing Audio Shortcode

Now click on the “Text” tab in the editor to see the audio file basically uses a shortcode to display as a player.

We have added a space before and after the square brackets to avoid the text is being converted into an audio player. When using shortcode you should remove those spaces to work properly.

The closing audio tag is not mandatory.

You can also add the fallback audio files using the below shortcode. In this case if there is a problem in playing .mp3 file then WordPress will choose the fallback option .ogg and then .wav.

Looping and autoplay options can be added as below:

Ensure to enable autoplay option only if required in order to provide good user experience.

Inserting a Playlist

Click on the “Add Media” button in your post editor and then click on the “Create Audio Playlist” option. Upload or select the required audio files to be shown in the playlist and click on “Create a new playlist” button.

Creating Audio Playlist in WordPress
Creating Audio Playlist in WordPress

You will be taken to the edit playlist screen as shown below. Drag and drop the files to reorder the playing sequence and change the captions if required.

Editing Audio Playlist in WordPress
Editing Audio Playlist in WordPress

Under “Playlist Settings” pane on the right side, enable or disable track list, artist name and featured images to be shown in the audio player or not.

Finally click on the “Insert audio playlist” and you will see the audio player with playlist like below:

Audio Player with Playlist in WordPress
Audio Player with Playlist in WordPress

In order to add featured image for audio files, navigate to “Media > Library” menu. Edit the audio files you have uploaded and add featured image to each audio file.

Customizing Playlist Shortcode

When you switch to “Text” tab, you will again find WordPress uses shortcode to insert a playlist like below:

You can add the following parameters to customize the playlist:

ParameterDefault ValueOther Possible ValuesDescription
typeaudiovideoChange audio player to video player (you need to have a required videos uploaded).
orderASCDESCAscending or descending order
idsAttachment idsSeparated with comma
excludeemptyEnter attachment idsEntered ids will be excluded from the playlist
tracklisttruefalseShow or hide playlist
tracknumberstruefalseShow or hide track numbers in the playlist
imagestruefalseShow or hide featured image in the player
artiststruefalseShow or hide artist name in the playlist
stylelightdarkApply light or dark skin

For example, you can change the default light style player to dark style and disable track numbers in the list by using the following shortcode:

Insert Audio Player in Sidebar and Footer

The purpose of using shortcode is very simple – it can be inserted into any area of your site like sidebar and footer. Under “Appearance > Widgets” drag and drop the “Text” widget on the sidebar or footer area where you want to add the player.

Add Audio Player in Widget Area
Add Audio Player in Widget Area

Insert the audio or playlist shortcodes with your customization as explained above. Save your widget and the player will be shown on the selected widget area.

In further articles we will discuss more on the following topics related to WordPress audio:

  • Add custom audio player with plugin
  • Embedding audio player from third parties like SoundCloud
  • Add background music in WordPress site

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

1 thought on “How to Add Audio Player in WordPress Site Without Plugin?”

Leave your response.

  1. I put the auto play code in and everything works but the auto play the loop ect I need it to auto play when the user opens the homepage and I cannot make that work any suggestions thankyou

    Reply

Leave a Comment