Create Playable WordPress Sidebar Audio Using The Audio Widget

Updated November 18th, 2018
Updated November 18th, 2018
Share this post:
Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on pinterest
Share on pocket
Share on email
Share on print

WordPress is making terrific updates for the core and version 4.8 brought the great addition of creating a playable sidebar using the new WordPress sidebar audio widget. In this article, we’ll show you how it’s done.

You can either watch the detailed video tutorial below or scroll below that to read the image/text version of the tutorial.

Create A Playable WordPress Sidebar Widget

To create a playable WordPress sidebar using the audio widget, first log into your WordPress admin. Next, hover over to the Appearance menu and click on Widgets.

This method works only in WordPress 4.8 or newer because the audio widget wasn’t available in the earlier versions of WP. If you’ve updated your WP, you’ll see an audio widget option:

Find it by scrolling through the list of available widgets. Drag and drop the one called Audio into the sidebar menu on the right.

Where you see the dashed box outline is where the Audio widget will be placed. In the open widget, click on Add Audio button.

Here, you can upload the audio file you want in your sidebar. As you’ll see in the screenshots below, you’ll have three options. You can:

  1. Upload the files
  2. Get them from your Media Library if you uploaded them previously
  3. Insert the file from an URL

Upload the files or getting them from your media library simply by choosing the appropriate tab and either uploading the file or choosing it form the list.

Advertisement

Inserting a file from URL needs a URL that contains the playable audio file. Most often you’d use a link to a file hosted on Amazon S3 or a similar cloud service.

The best method and the one I’ll be expanding on in this article is inserting from URL because it uses less of your server resources. The fewer server resources you use the faster your site will run.

For the purpose of this tutorial, I’ll add a short audio file from Amazon S3.

To do that, first log into the Amazon S3 console and select an audio file.

When you click on the checkbox beside the file, a menu will appear on the right. It will look like this:

Select the Link and copy it. Do not use the copy path shortcut because it won’t copy the correct link. Go back to your Audio widget page and paste the link inside the box.

Advertisement

Next, click on Add to Widget.

Then click on Save.

Now when you visit your site, you’ll see the Audio widget in the sidebar with an audio player.

If you or your visitors are having problems with playing the audio, check if the permissions on the S3 console are set to visible to Everyone.

Click on the box for “Everyone” and then check the boxes for ‘Read’ on both Object Access and Permissions Access and click on Save.

Creating a Soundcloud Audio Sidebar

Advertisement

If you want to get the audio from Soundcloud, the process is different.

What you’ll need to do is go to the desired soundcloud audio page and copy the embed code. I’ll show you a step by step instruction on how it’s done.

Step 1: Go to your desired Soundcloud audio

Step 2: Click on the ‘share’ button

Step 3: Click on the Embed tab

Step 4: Copy the embed code

Step 5: Drop and drop a Text Widget to the sidebar in your WordPress site

Step 6: Open the widget and paste the embed code from Soundcloud inside it.

Step 7: Save and check the results

If you’ve done everything right and I’m sure you did, go to any page on your WordPress site that has the sidebar and you’ll see a Soundcloud widget on the right-hand side.

An important note is that you must use the Embed code. Soundcloud does provide a link to the audio file, but it’s not a link that you can use in the URL field for the new Audio widget.

It’s pretty easy to add audio files to your WordPress sidebar in version 4.8 and higher by using an audio widget. If you have any questions and comments, leave them below and I’ll try to answer them as soon as possible. Until next time, keep crushing it and I’ll see you in the next tutorial.

For customizing your WordPress site further, make sure you subscribe to my WordPress Tutorials – WPLearningLab channel and click on the bell notification not to miss any of the useful WordPress tutorials.

Share this post:
Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on pinterest
Share on pocket
Share on email
Share on print
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Responses

Your email address will not be published.

WPLearningLab

Warning: Use of undefined constant WPBF_CHILD_THEME_URI - assumed 'WPBF_CHILD_THEME_URI' (this will throw an Error in a future version of PHP) in /home/customer/www/wplearninglab.com/public_html/wp-content/themes/buddyboss-theme-child/functions.php on line 108

Warning: Use of undefined constant WPBF_CHILD_VERSION - assumed 'WPBF_CHILD_VERSION' (this will throw an Error in a future version of PHP) in /home/customer/www/wplearninglab.com/public_html/wp-content/themes/buddyboss-theme-child/functions.php on line 108