How to Embed Audio Files in Your WordPress

As images that can be inserted in WordPress posts, audio files as a form of the media file can also be inserted or embedded between your article posts in WordPress.

By default, WordPress can embed, show and play audio in its article posts using HTML5 audio tag that supports WAV, MP3, and OGG file formats (I recommend you to use MP3 format which is commonly used by internet users).

A. Embed Audio File by Native WordPress 

To insert or embed an audio file at the beginning, middle, or end of article posts on WordPress is very easy. Simply click [Add Media] button on the menu tab of WordPress text editor after you place the cursor at the location where the audio file will be inserted. Then click the [Add Media] icon, or from the menu tab of your WordPress editor page, click [Insert] – [Add Media]. embed audio

You can upload audio files from your computer or by embedding from websites that provide audio file hosting. In the example, I took the URL from the audio hosting website in order to save the hosting space that I bought.

When published, the paragraph display posts that have been inserted audio files will look like the display below.

You can try to play the audio file above. Then you can continue editing or adding articles in the next paragraph.

B. Embed Audio File Using HTML5 Audio Player Plugin

Another way to insert or embed audio files is to use the audio player plugin for WordPress. There are many plugins that you can use, one of which is Html5 Audio Player – Audio Player for WordPress.

This plugin can play MP3, WAV, and OGG audio file in your WordPress and works well on all devices. Besides being able to play audio files in article posts, you can also play them on pages, widget areas, and template files.

The features of this plugin are:

Free version

  • Can works on all popular browsers such as Chrome, Firefox, Safari, and IE.
  • The audio player is responsive to various devices.
  • Ability to read both the OGG and MP3 audio file version and the plugin will play the proper one based on the device.
  • Has autoplay option to play an audio file as soon as the web page loads.
  • If you sell audio files from your website, you can use this plugin to provide a preview.

Pro version

  • Fast forward and rewind button.
  • Colour changing options.
  • Preload changing options to increase webpage load speed.
  • Hide or show option on restart button, play button, mute button, audio progress bar, volume control, etc.

The following are step by step use of the plugin:

  1. After download from Html5 Audio Player – Audio Player for WordPress plugin page, then install on your WordPress (the steps are the same as installing other WordPress plugins in general).
  2. Activate the plugin after installed successfully. embed audio
  3. In the left sidebar of your WordPress backend, click [Html5 Audio Player] – [Add Audio Player] to start adding an audio file.
  4. Add the audio title in the title box.
  5. Scroll down your mouse and in the [Upload audio], click [Add or Upload File] button.
  6. Select your audio file from your PC (Personal Computer) to upload it. After uploading process finish, select it, and click [Use this file] button. Now the file name appears under the [Upload audio] box. embed audio
  7. Select the playing method: Repeat once, or Repeat again and again. embed audio
  8. Choose the audio player width (you can choose ‘None’ for the responsive player).
  9. Click [Save] button after you have finished configuring your audio player.
  10. Copy the player id of your audio player as the shortcode.
  11. Back to your article post that will be inserted with the audio player and insert that shortcode whereever you want.
  12. The example of this plugin use can be seen in the display below.