Media 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.
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.
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.
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.
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.
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"]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.
Final Words
Though built-in audio embed is a good option, it is simple and may not fulfill when you need full audio player setup. The alternate options are to use an audio player plugin or embed audio player from third party websites like SoundCloud.
1 Comment
Leave your reply.