How to Add Audio Player in WordPress Site Without Plugin?

Using media elements is very important to attract users and retain them on your website. You can easily embed YouTube and other videos on your WordPress. Similarly, if you want to embed an audio on your site, here is how you can do that. 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 audio files as a playlist. In this article, we will explain how to add audio player in WordPress site using default audio shortcode without any plugin. First, we will explain with old Classic Editor and then with the Gutenberg editor.

1. Add Audio in WordPress Classic Editor

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. The process is super easy with Classic Editor using the “Add Media” button.

1.1. 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.

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.

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.

1.2. 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.

[audio mp3="https://img.webnots.com/2017/02/Sample1.mp3"][/audio]

Though the shortcode has both open and close tags, 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.

[audio mp3="Sample1.mp3" ogg="Sample1.ogg" wav="Sample1.wav"][/audio]

Looping and autoplay options can be added as below:

[audio mp3="Sample1.mp3" ogg="Sample1.ogg" wav="Sample1.wav" loop="on" autoplay=1][/audio]

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

1.3. 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.

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.

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:

Note: 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.

1.4. Customizing Playlist Shortcode

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

[playlist ids="xxx,xxx,xxx"]

You can add the following parameters to customize the playlist:

Parameter	Default Value	Other Possible Values	Description
type	audio	video	Change audio player to video player (you need to have a required videos uploaded).
order	ASC	DESC	Ascending or descending order
ids	Attachment ids		Separated with comma
exclude	empty	Enter attachment ids	Entered ids will be excluded from the playlist
tracklist	true	false	Show or hide playlist
tracknumbers	true	false	Show or hide track numbers in the playlist
images	true	false	Show or hide featured image in the player
artists	true	false	Show or hide artist name in the playlist
style	light	dark	Apply 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:

[playlist ids="xxx,xxx,xxx" style="dark" tracknumbers="false"]

1.5. 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.

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.

2. Insert Audio Player in Gutenberg Editor

Since Gutenberg editor offers blocks, you will not find the “Add Media” button. However, there are multiple other options available for you.

2.1. Using Classic Block

You can insert a Classic block in Gutenberg editor and then use “Add Media” button from there. Further steps are same as explained above with Classic Editor to insert a file or playlist.

2.2. Using Shortcode Block

Use a Shortcode block to insert any of the audio or playlist shortcodes as explained above.

2.3. Audio Block

Gutenberg offers a dedicated Audio block which you can use to paste your own or third-party audio file URL.

• Search and insert an Audio block.
• Click the “Media Library” to select or upload a supported audio file. This Media Library will only show audio files and not the images and you can select only one file to insert as a player. You can also preview the audio file before inserting.

• The block will be instantly convert the selected file as an audio player. You can enable autoplay, loop and set the preload condition from the block’s settings on sidebar. Select preload condition as “Auto” for automatically playing the audio when the page loads.

2.4. Use Embed Block

Use this block to insert your own and third-party audio file URL. It is also possible to insert playlist URL from third-party services like Spotify. You can insert only one URL and Gutenberg will change the embedded URL to a shortcode which you can see in the editor.

2.5. Other Embed Blocks

Gutenberg also offers additional embed blocks for Spotify, SoundCloud, Mixcloud and Pocket Casts. These blocks work similar to Embed block.

2.6. Custom HTML

If your favorite audio service offers custom code for embedding (instead of URL), then Custom HTML block is the option you should use. Simply insert a Custom HTML block and paste the code under “HTML” option. The preview may not work within the editor. So, you need to publish the content and check the result on a live page.

Final Words

Whether you are using Classic Editor or Gutenberg editor, WordPress has plenty of options to insert audio file and playlist without plugin. You can use your own files or insert URL from third-party services. Though built-in audio embed is a good option, it is simple and may not fulfill when you need a setup with full controls. The alternate options are to embed audio player URL or code from third party websites like SoundCloud.