How to embed audio files stored on Google Drive into WordPress posts and pages

embed-audio-files-into-wordpress-from-google-drive

How to embed audio files into WordPress is nothing new. There are plugins and ways to easily get this done. And even though it’s available, many people are not aware of media files stored on Google Drive which can be embedded into your WordPress posts and pages, without the need of using any audio players or additional plugins. Of course, some people might also be wondering why you would want to or even the need to do something like this. Realistically, you don’t. However, some people as well as online marketers can have a lot of media such as audio files in the way of eBook audios, courses, tutorials, podcasts, and even audios of blog posts and pages.

WordPress along with a few other platforms have ways of making the process easy to embed such media files. That’s fine if all you have are a few files, but if you have many files that require uploading and storing on your server, it might become negative down the road. For one thing, some audio files like podcasts can be bulky and take up space on your server. On top of that, depending on the number of files you have stored on your server could dictate the load time of your site and pages.

Uploading and storing certain media files such as audio to Google Drive will help your site maintain faster load times by freeing up space on your own server. These files are automatically encoded when uploaded to Google Drive, allowing a person to listen to the audio from a browser. Now, Google Drive provides embed codes for this which allows for the files to be embedded on a blog or website. Of course, many people often find it difficult in locating the embed code. So, let’s get started.

1) For this example, I’m going to choose a random post I made “What it takes for seniors marketing online” and add an audio file of the post. You’ll notice from the image that I’m using Elementor in WordPress for the page.

google-drive-demo-1

 

2) I want to place the audio player just below the title of the page. In order to do that I need to create a new section where I can embed the audio player. In this case, I’m going to drag a text box where I want to set the audio player just under the title.

google-drive-demo-2

 

3) After that, the text area will be set just below the title where I want to put the audio player.

google-drive-demo-3

 

4) Now, after uploading your files to your Google Drive account, locate the individual file you need.

google-drive-demo-5

 

5) Mouse over the file you want and right-click.

google-drive-demo-4

 

6) Select the “Get shareable link” as demonstrated from the image.

google-drive-demo-16

 

7) A dialogue box will popup – look for the “sharing settings” link and click on it. (bottom arrow)

google-drive-demo-6

 

8) Another dialogue box will pop-up called Share with others. Click on the tab “Anyone with the link can view

google-drive-demo-7

 

9) The Link Sharing box will appear and you need to choose the “On – Public on the web” and click save. It’s important that you choose this setting, if you don’t, the audio file may not work properly or not work at all.

google-drive-demo-8

 

10) Next, hoover over the audio file again and double click to open the player. Look in the upper right corner and click on the drop-down menu (three dots) and click on the Open in new window option.

google-drive-demo-9

 

11) Player will open again. Look in the upper right corner and click the drop-down menu (three dots) again. This time, scroll down to Embed item… and click on it.

google-drive-demo-10

 

12) A new dialogue box with the embed code will appear. Copy the code and paste into a text editor or notepad.

google-drive-demo-11

 

Notice the code with the width 640 and height 480.

google-drive-demo-12

 

If you prefer, you can leave the size of the player as is. I prefer changing the width from 640 to 400 and the height from 480 to 75. If you do make changes to the width and height, just make sure that everything else in the code remains the same or the player may not work properly.

google-drive-demo-13

 

In order to embed the audio file and player into a page you’ll need to go back to the page editor and click on the Text tab. This will allow you to paste the code so it will display correctly.

google-drive-demo-14

 

Once I complete the update of the page, the player will be positioned just below the title of the page.

google-drive-demo-15

 

There you go, now you can play audio files on your site that are stored on Google Drive. It’s really not as difficult as it looks, and if you do this a couple times, you’ll soon be an expert.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.