Hosting MP3 files on Google Drive + HTML5 Audio Player

What Google Drive Sharing offers us!

I am doing a Podcast on portalZINE.TV since last year and always host a backup of the MP3 episodes on Google Drive.

The link that you create, when enabling file sharing on Google Drive, can not be used to actually embed it on your website.

The link looks something like that:

  1. https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing

To actually use it directly, we need to get the ID. Sure, you  could just extract the ID, but often we just want to copy and paste. The sharing link is also your actual reference to the original file, which I store together with the podcast.

Apply a simple RegEX

We use a simple Regex to extract the ID:

  1. https://drive.google.com/file/d/([a-zA-Z0-9_]+)\/

PHP

  1. $input = "https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing";
  2.  
  3. preg_match("/https:\/\/drive.google.com\/file\/d\/([a-zA-Z0-9_]+)\//", $input, $match);
  4.  
  5. $GoogleDriveFileID = $match[1];

JAVASCRIPT

  1. var input = "https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing";
  2.  
  3. var res = input.match(/https:\/\/drive.google.com\/file\/d\/([a-zA-Z0-9_]+)\//)
  4.  
  5. var googleDriveFileID = res[1];

Just use it!

This ID can than be used to embed the file directly using HTML5 audio controls.

Its important to use the “https://docs.google.com/uc?export=open&id=” url to open the file, as it provides the direct access to the shared file

  1.  <audio controls>
  2.  <source src="https://docs.google.com/uc?export=open&id=<?php echo $GoogleDriveFileID; ?>" type="audio/mp3">
  3. <p>This browser does not support HTML5 audio</p>
  4.  </audio>
Alex

I am a full-stack developer.

I love programming,  design and know my way around server architecture as well.  I would never feel complete, with one of these missing.

I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest.

Apart from that, I am a peace loving guy who tries to have people around him that think the same.  I truly believe in the principle: “If you help someone, someone will help you, when you need it."

View Comments

    • Hi Joe,
      just tested this with a MP3 file on my Google Drive. This still works like described above.

      Regards
      Alex

  • I am sorry for not being specific. I mean this works for desktop applications. However if I try to enter a website from a smartphone this doesn`t work. I may have have been doing something wrong. If you have any thoughts on the matter, please let us be enlightened!

    • Hey there,
      I will take a look and try to make your way to enlightenment as easy as possible :)
      Cheers
      Alex

    • Still works perfectly for me on Android & iOS. Only had to switch to https for the audio source.

Recent Posts

3D Messer Gravur Konfigurator – TYPEMYKNIFE® | 2022

TYPEMYKNIFE® - allows you to laser ingrave your knife using a unique 3D configurator. I redesigned their 3D knife configurator… Read More

2 days ago

Display Calibration / Spyder / Mac M1

Why? Color correction is important to me and to the projects I do. Regularly calibrating your monitor is essential in… Read More

2 months ago

Importing CSV files with HTML5 and Papa Parse!

PAPA PARSE Papa Parse is a powerful, in-browser CSV parser for the big boys and girls :)If you do need… Read More

3 months ago

5 auf einen Streich – Folge 104

Die erste Folge nach einer langen Pause ;) Folge 104 Read More

3 months ago

Podcast – 5 auf einen Streich

UMZUG Moin! Im Juni hatte ich den Umbau von portalZINE TV angekündigt und kündige jetzt den Umzug des Podcasts -… Read More

3 months ago

B&B / Hotel Booking Solutions for WordPress | 2021

BOOKING SOLUTIONS 202x This is my take on a subset of booking, appointment, PMS or reservation solutions for WordPress. Update… Read More

4 months ago