Embed an audio file from Google Drive in a WordPress blog post

Did you know?

You can embed media files from Google Drive into your WordPress blog posts or pages.

When you upload certain media files to Google Drive, it encodes them in such a way that they can be played back right in the browser – sort of like Youtube (which is also owned by Google). Like with Youtube, you can get the embed code that will allow you to embed this media on other websites. It’s a bit obscured – you have to know where to look in order to find the embed code.

That’s what this post is for! Enjoy!

(Audio sample v01d – “Of the Willing”)

  1. Upload audio file to Google Drive & set permission
  2. Get the embed code
  3. Paste the embed code into blog post

1. Upload audio file to Google Drive & set permission

The link to 'get shareable link' in Google Drive
Fig 1. Sharing with the public

After uploading, right-click the file you uploaded, then select “Get shareable link” from the menu. This will open the sharing of your item to the public. Note that, by default, users are not prevented from downloading the audio file. (Fig. 1)

This is all necessary in order to embed the audio on your blog site. If you change the permissions and/or prevent users from downloading the file, the media will not play for some visitors to your blog.

2. Get the embed code

The link to open the preview in a new window
Fig 2. The audio preview window
  1. Double-click the audio file from the list of items in Google drive. This will open the Preview window. (see Fig 2)
  2. Find and click the icon with three vertical dots, in the upper-right corner (see Fig 2 #1).
  3. From the menu, select “Open in new window(see Fig 2 #2). This will open a similar looking window in a new tab.
The link to get the embed code from Google Drive
Fig 3. Getting the embed code
  1. In the new window, find and click the icon with three vertical dots, in the upper-right corner (see Fig 3 #1).
  2. From the menu, select “Embed item…” (see Fig 3 #2). This will open a pop-up containing the code you will need in order to embed the audio in your blog post. It will look something like the image in Fig 4.
  3. Copy the code, and paste somewhere safe until you’re ready to put it into the blog post.
The embed code in Google Drive
Fig 4. The embed code

3. Paste the embed code into your blog post

Go into your WordPress blog, and either edit an existing post or page OR create a new one.

If you’ve never worked around embed code before, it may be a good idea to add all of the other elements of your blog post/page first. For example, if you wanted to write a description or add an image, you may want to do that first and then add the embed code.

Most importantly, don’t change the embed code unless you know what you’re doing.

The embed code pasted into blog post
Fig 5. Paste the embed code into the blog post (Classic Editor)

Embedding the code using the Classic Editor

Please note that WordPress introduced a block-based editor after this post was originally published. You can achieve similar results using the “Custom HTML” block in the new editor.

  1. Give the post/page a title (see Fig 5 #1).
  2. Make sure your cursor is on a new line, where you want to embed the audio player.
  3. Click the ‘Text’ tab, found at the top-right corner of the text editor (see Fig 5 #2).
  4. Paste the embed code into the textbox (see Fig 5 #3).

It will look something like this:

Fig 6. The embedded audio player

IF you feel comfortable editing the embed code, you can change the width and height values so that the embedded media doesn’t take up so much extra space. For the basic audio player, a height of 100 should be enough.

Example code:

<iframe src=”https://drive.google.com/file/d/0B9LKEddT6B_1V3RNcnh0ddddd/preview” width=”640″ height=”480″></iframe>

Can be changed to:

<iframe src=”https://drive.google.com/file/d/0B9LKEddT6B_1V3RNcnh0ddddd/preview” width=”640″ height=”100″></iframe>