How to Embed MP3 Audio Files In Web Pages with the help of Google Drive

-

Audio hosting websites like SoundCloud or Anchor.fm make it easy for you to embed audio files in your web pages and blogs. 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!

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

Step 2: Generate the Player Embed Code

The Google Drive URL will have the following structure:

http://ift.tt/2lGfgD6

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

<iframe 
  frameborder="0" 
  width="400"     
  height="200"
  src="http://ift.tt/2CwhI9S;    
</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.



source:http://ift.tt/2CGm7EJ

Comments

Post a Comment

Popular posts from this blog

The 101 Most Useful Websites

-
Image
Presenting the 101 most useful websites on the internet. These sites, well most of them, solve at least one problem really well and they all have simple web addresses (URLs) that you can memorize thus saving you a trip to Google. The Most Useful Websites and Web Apps ctrlq.org/screenshots  – for capturing  screenshots of web pages  on mobile and desktops. dictation.io  – online voice recognition in the browser itself. zerodollarmovies.com  – find full-length movies on YouTube. screenr.com  – record movies of your desktop and send them straight to YouTube. goo.gl  – shorten long URLs and convert URLs into  QR codes . unfurlr.come  – find the original URL that’s hiding behind a short URL. qClock  – find the local time of a city using a  Google Map . copypastecharacter.com  – copy special characters that aren’t on your keyboard. postpost.com  – a better search engine for twitter. lovelycharts.com  – c...
Read more

Compare MacBook Prices Worldwide with Google Sheets

-
Image
Looking to buy the new Macbook Pro with M3 chips? Wondering if it would be cheaper to purchase a Macbook in your local Apple store, or ask a friend who is travelling from Singapore or Japan to bring one for you? Here’s a Google Sheet that can help you compare prices of MacBooks in different countries. It takes the current prices of MacBooks from Apple online stores in different countries and converts them to a common currency (US Dollars). The exchange rates are fetched directly from Google Finance so the prices will update automatically when the exchange rates change. How the Macbook Price Comparison Sheet Works I have written a Node.js script that fetches the current prices of MacBooks from the Apple website and writes them to Google Sheets. Here’s the code that scrapes the Apple website and parses the HTML to extract the prices. Get Macbook Prices from Apple Website Apple uses JSON-LD to embed structured pricing data in their web pages that can be easily parsed using che...
Read more

Interesting Websites to Visit When You’re Bored

-
The 15 Interesting Websites Dear Photograph  – The website features photographs of people holding up old pictures that were taken at the exact spot several years ago. Some of the best photographs are now compiled in a  book  (dearphotograph.me). Textastrophe  – This website is a reminder of why you shouldn’t post your cell phone number on public websites. The creator starts a text conversation with random numbers found on Craigslist ads and publishes the transcript on the internet. The chats are funny and I hope its real because  screenshots can be faked  too (textastrophe.com). Stratocam  – This is like an online self-running slideshow showcasing some of the best satellite images found on Google Maps. Run the website in full-screen mode (Ctrl+Shift+F) and you may discover pretty and unexpected place on our beautiful earth (stratocam.com). Awkward Family Photos  – This is a place where people share embarrassing pictures of their loved ones i...
Read more