Host Audio File in Google Drive & Embed it on Website

Written by Sarmad Gardezi January 2, 2018

Many websites like Soundcloud and reverbnation use image hosting and are large plateforn of Sound Hosting websites. But you you can make your own Sound Hosting website using google drive for free.

The iframe i’m going to share today is just like a embed iframe code but it will help you to embed the sound in to your wordpress Blogspot or weebly website through google drive.

If you have been storing your MP3 files inside Google Drive, you can embed the files directly from Drive without having to upload them to another website. The Drive MP3 player can be embedded on any website that supports IFRAME and the list includes Blogger, WordPress, Medium or even the new Google Sites.

Also see: Embed YouTube as Audio Player

Step 1: Upload the MP3 to Google Drive

Open drive.google.com and upload the MP3 to your Google Drive. After the file is uploaded, right-click to share and set the sharing permission to “Anyone on the Internet can find and view” to that file will be visible to anyone who visits the link.

Remember: Make Public file is compulsory for the iframe to work.

.

Step 2: Generate the Player Embed Code

The Google Drive URL will have the following structure so you need to make changes on it.

https://drive.google.com/file/d/1234xyz/view?usp=sharing

Now all you have to do is replace /view with /preview and wrap the modified URL in an IFRAME tag as shown:

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

Here’s a live example. The embedded MP3 player has volume controls, play/pause buttons, seek bar, no Google branding, it works on mobile and the play also auto-detects and displays the duration of the music file.


The MP3 file is hosted on Google Drive and embedded here inside the IFRAME tag Now you can use it on any WordPress Weebly or Blogspot website.

image


           
           

Subscribe to my Email Newsletter

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 26,908 other subscribers
           
       
Custom Support

I build bespoke solutions that use the capabilities and the features of Google Apps for automating business processes and driving business productivity.

or send me a message via Facebook Messenger