• Home »
  • Insights »
  • Integrate Embedded Audio Player Into WordPress Site, WP Embedded Audio Player
Integrate Embedded Audio Player Into WordPress Site, WP Embedded Audio Player

Integrate Embedded Audio Player Into WordPress Site, WP Embedded Audio Player

I needed to add an embedded audio player into a WordPress site for a project I was working on so I started looking at various plugins. The most popular embedded audio player is a WordPress plugin called “Audio Player” which provides you with the ability to easily upload audio files to your WordPress admin site and have the audio files display and play in an embedded audio player on the front end of the WordPress site. Below I describe in more detail how to install the plugin and how to add audio files to your site after the plugin is installed.

Install & Use WordPress Embedded Audio Player Plugin:

  1. Download & Install Audio Player: First download the WordPress plugin called Audio Player by clicking here. After you have downloaded the zip file called something similar to audio-player. (it may change based on version number) then unpack the zip file to create a folder on your local computer called audio-player. Upload this folder to the plugins directory of your WordPress site located at “site-root/wp-content/plugins”. You will also need to create a folder in the site root folder (the same folder that contains the wp-content folder) called audio with the proper permissions for your browser to be able to upload files to this directory.
  2. Enable Audio Player: Login to the administration portion of your WordPress site typically located at http://www.example.com/wp-admin. Click on Plugins in the left navigation, then select the Inactive link, and then click the Activate button next to the Audio Player plugin. The Audio Player plugin is now activated and operational. You can visit the settings for the Audio Player at any time to modify the functionality or appearance of this WordPress plugin.
  3. Edit or Add WordPress Post/Page: The Audio Player can be used pretty much anywhere but in this example we will simply add a new page to test out the Audio Player plugin. Click on Add New underneath the Pages section in the left navigation and give it a title such as Test or something similar. You can add other content if you want but for now we will focus on inserting a single audio MP3 file to display on the page.
  4. Add Audio File: Click the Add Audio icon which is displayed in the below example image. The icon is located to the right of Upload/Insert above the WYSIWYG editor and looks like a music note.

    WordPress Admin: Add Audio File Button

  5. Select Audio File: A window will pop open defaulted to the Flash Uploader which is what we will use in this example. Click the Select Files button displayed in the image below.

    WordPress Flash Uploader: Select Files Select Audio File

  6. Browse For Audio File: Now a typical Explorer window will open which will allow you to navigate to the audio file on your computer. Browse to the MP3 audio file you want to upload and click on it to automatically begin the upload process as displayed in the below example image.

    WordPress Flash Uploader: Crunching Audio File

  7. Select Audio Player & Insert: Once the file has completed uploading click the Audio Player button located below the Link URL field in the details window as shown in the below example image. This will tell WordPress to add the necessary syntax to display the embedded audio player controls and point to the correct MP3 audio file on your WordPress site. After clicking the Audio Player button click on the Insert into Post button to add the syntax into the WYSIWYG editor.

    WordPress Flash Uploader: Add Audio File Details

    After inserting the syntax for the Audio Player into the WYSIWYG editor click the Update button located in the right column to save the page or post.

  8. Verify Audio Player Plugin Display: Now visit the front end of your WordPress site to verify the Audio Player is displayed properly as shown in the below example image.

    WordPress Audio Player Plugin Display

  9. Verify Audio Player Plugin Functionality: Next click on the play button on the right side of the embedded audio player to play the MP3 audio file. This will also expand the player to display the name of the file and the time remaining as displayed in the below example image.

    WordPress Audio Player Plugin With MP3 Playing

You can embed multiple audio files per WordPress post/page or on as many posts/pages. Don’t forget to check out the settings page for the Audio Player plugin to see if there is anything you want to modify to integrate the player better with your site.

A Step by Step WordPress Tutorial For Beginners (Paperback)

List Price: $19.95
New From: $1.36 USD In Stock
Used from: $0.01 USD In Stock

WordPress Bible (Paperback)

List Price: $49.99
New From: $6.24 USD In Stock
Used from: $0.01 USD In Stock