How to embed MP3 audio files in your Shopify store with the help of Google Drive

Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.

You can embed audio files in your Shopify store with audio hosting websites like SoundCloud or Anchor.fm. Just upload your file – like an MP3 song or an audio podcast – to any of these sites and they’ll provide the HTML embed code that you can copy-paste in your web template. Simple!

But you can embed MP3 audio files in your pages with the help of Google Drive.

DEMO

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“.

Step 2: Generate the Player Embed Code

The Google Drive URL will have the following structure: https://drive.google.com/file/d/abcxyz123/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 below:

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.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *