When you’re working on your website, you may find you have some audio you want to embed on a page. For example if you have a recording of yourself talking about a piece of art, it’s possible to embed it in the product page so it can be played by visitors while they are on this page.
This article will explain how to take a recording which has been saved as an MP3, uploaded to Google Drive, and then adding code to a product page which will allow the audio to be played by visitors to your site. This process will work for adding audio clips to any WYSIWYG editor window.
Uploading your MP3
You will need to have your recording saved on your computer as a playable MP3 before you can begin. You will also need to have a Google account, as you will be uploading the file to your Google Drive file locker.
Explaining how to create your recording is outside of the scope of this article. However there are many useful articles you can find online which explain how to go through this process, such as this one from dummies.com named How to Create an MP3 File.
- Once you have your MP3 ready to upload, it’s time to login to your Google Drive account at https://drive.google.com/drive/my-drive. On the upper left of the window, click on New.
- Select File upload.
- Now select your MP3 from where it’s save on your computer, and click on Open.
- A small popup will appear on the bottom-right of the page once this has been uploaded. Click on the icon on the right of the popup to select the file where it’s been saved in your Drive account.
- This will scroll you down the page to display the file you’ve just uploaded.
- Now right-click on it, and select Share.
- On the pop-up that shows up, click on Advanced.
- Under the Who has access section, click on Change to the right of the Private setting.
- Now select Public on the web, then click on Save. This will make the file publicly accessible, provided you have a link to the file.
- Now click on Done to return to the file list.
- Now right-click on the MP3 again, and click on Share again.
- Now click on the Copy link button.
- Now let’s save the link so we can fix this later. Open Notepad (or TextEdit on Macs) and paste the link into the application window.
- Now to create a new link which will be playable when embedded in the editor. What we will have to do is to copy out the unique identifier for the file from that link. The part we need to copy is the section displayed as Xs in the example link here. https://drive.google.com/file/d/XXXXXXXXXXXXXXXXXX/view?usp=sharing
I will highlight the section and copy it out underneath. You will need to do this with your link to separate it.
- What we will need to do now is to use that code in this link, where we will replace the section of Xs with the extracted section from the previous step.
- Copy the unique identifier, then select the Xs, and paste the identifier over top to replace that.
- Now that we have a link which we can add to code to embed on the site, so let’s move on to setting this up.
Adding code to your product page
- Let’s start in the Site Manager. Scroll down and open the Art Print Store or Standard Store where your product is.
- If you have the product in a category, select the category now.
- Now find the product in the list, and click on edit.
- Now scroll down until you see the Short Description editor window.
- Now switch back to your Notepad/TextEdit window, and paste this code into it:
<source src="http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX" type="audio/mp3">
- Highlight the previous line and copy it.
- Now select the address in the source line further down the page.
- Delete the highlighted text.
- Now paste in the address into the location where you just deleted that text.
- Now highlight and copy the last section, starting at <audio controls>, down to </audio>.
- Let’s switch back to the Site Manager window, and click on the Source button in the editor section.
- In this section I’m going to add a couple of extra lines at the front of the existing content in the page, and then paste in the code from the Notepad/TextEdit window. Now click on the Save button, and then we can click on the Preview Site button to see how the player looks on the live site.
- When the page loads, you will see a player gadget displayed below the product name and above the rest of the short description text.