How to Embed MP3 Audio Files in Web Pages from Google Drive?

It is very simple to incorporate audio files into the initial web pages and blogs with the help of multiple audio storage services like SoundCloud and Anchor.fm. Adding MP3 audio files to websites has become an easy procedure in today's digital technology for a variety of uses and requirements, such as podcasts and music sharing, and improving the overall user experience. Although there are various types of ways to complete this process, using Google Drive provides an easy and effective way to do the requirements.

In this article, we'll discuss some simple methods or steps to embed MP3 audio files in web pages with the help of Google Drive.

How to Embed MP3 Audio Files in Web Pages from Google Drive?

You don't need to upload your MP3 music to another website if you have been storing it on Google Drive. You can embed the files straight from Drive. Any website that supports IFRAME, such as Blogger, WordPress, Medium, or even the recently released Google Sites, can embed the Drive MP3 player.

Step 1: Upload the MP3 File to Google Drive

• Go to Google and open drive.google.com > Upload the MP3 file to your Google Drive.

• Right-click to share the entire file > Set the sharing file option like "Anyone with the link".

Step 2: Generate and Obtain a Player Embed Code

• See the shared file link on your display > Click on "Copy Link" > Open a text or HTML editor
• Pas te previous copied link > Edit the link URL "/edit?usp=sharing" > See the modified link as "https://drive.google.com/file/d/YourFileID/preview"
• See the IFRAME tag as mentioned below -

<iframe
  frameborder="0"
  width="420"
  height="220"
  src="https://drive.google.com/file/d/1234xyz/preview">
</iframe>

Step 3: Embed the Audio file on the Web Page

• Navigate to the HTML source code > Follow the below-mentioned HTML code as a reference.

<audio controls>
  <source src="https://drive.google.com/file/d/YourFileID/preview" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

• Now, replace "YourFileID" with the used or actual file ID obtained from the previous shareable link > Save the overall changes.

Conclusion

Using Google Drive to embed MP3 audio files into web pages is an easy way to improve the multimedia capabilities of your website. With a little effort and the help of the offered code snippets, you can easily incorporate audio material into your web pages and provide your visitors with an engaging experience. This technique ensures cross-browser and cross-device compatibility while offering a handy means of sharing audio files.

Also Read

• How to Embed Audio and Video in HTML?
• How To Add Audio To Google Forms