How to play google drive mp3 file using html audio tag?

Question

My aim is to play the mp3 file from the google drive. I am using the plugin MediaElement js. The reference I got is https://www.portalzine.de/dev/html5/hosting-mp3-files-on-google-drive-html5-audio-player/ This is working in chrome, Mozilla firefox but not in IE-11, safari and opera. I want this to be play in all browsers. Please give me the suggestions....

Himation

Check this out, a better solution webapps.stackexchange.com/questions/65763/… – Attestation

Above link also didn't help me, what I did is downloaded the Files from Drive that I wanted to link, than copied it's URL Location and used it for my Audio src, it worked... Not sure if the URL is permanent or it changes with time. Will check that – Attestation

Answer 1

1. URL for the audio file (anyone can view)

https://drive.google.com/file/d/1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-/view?usp=sharing

2. Extract the id from URL

1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-

3. URL for playing the audio file

https://docs.google.com/uc?export=download&id={id}

example:

https://docs.google.com/uc?export=download&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-

4. URL for downloading the audio file

https://drive.google.com/uc?authuser=0&id={id}&export=download

example:

https://drive.google.com/uc?authuser=0&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-&export=download

5. HTML for playing audio:

<audio controls="controls">
    <source src="https://docs.google.com/uc?export=download&id={id}">
</audio>

example:

<audio controls="controls">
  <source src="https://docs.google.com/uc?export=download&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-">
</audio>

6. HTML for downloading audio:

<a href="https://drive.google.com/uc?authuser=0&id={id}&export=download"/>Download

example:

<a href="https://drive.google.com/uc?authuser=0&id=1nQklEicsMeGBnuk0vv6zkHtXtyGyO9S-&export=download"/>Download

Nicholson

great!! that's saved me alot! – Piggyback

Not working working – Magdamagdaia

Sadly, this no longer works, whether drive.google.com or docs.google.com (I see both are used here). – Cappadocia

Its look Google has been tracking this answer and shut down every possible way. – Lett

Answer 2

In another thread on another page someone wrote the only solution that has worked for me:

If you share an MP3 by link, you obtain a link like this

https://drive.google.com/file/d/XXXXXXXXXXXXXXXXXX/view?usp=sharing where XXXXXXXXXXXXXXXXXX is the ID of your MP3 file. Then you can obtain a direct link to this audio by

http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX In particular you can use

<audio controls>
   <source src="http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX" type="audio/mp3">
   <p>Your browser does not support HTML5 audio :(</p>
</audio> 

The first link is the one you normally get, the other link is what you want to use with

Try to think of this as HTML code:

<audio controls>    
    <source src="http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX" type="audio/mp3">    
</audio>

Make sure you convert that link right and it will work!

Alethaalethea

This link format does not appear to work for HTML <audio> player on FF as of 2024. – Oceania

Answer 3

I'm using Direct Link Creator plugin of Google Drive and get the link easily. Here's an example.

<audio controls="controls">
    <source src="https://docs.google.com/uc?export=download&id=0B_ETxiqrp0SzbF9VQ3JCS2hnSlU">
</audio>

<video controls="controls">
    <source src="https://drive.google.com/uc?export=download&id=0B0JMGMGgxp9WMEdWb1hyQUhlOWs" type='video/mp4' />
</video>

Costotomy

Is this working on iPhone? I'm doing same and working on desktop browsers. But not working on iPhone. (Chrome and Safari both) – Phono

@Phono I do not find the <audio> player works in iOS in general. – Oceania

This link format does not appear to work for HTML <audio> player on FF as of 2024. – Oceania

Answer 4

I was trying to accomplish this inside the SSML audio tag for Actions on Google. None of the above steps seemed to work. I finally found a solution.

1) Get the file ID from the sharing link https://drive.google.com/file/d/your_file_id/view?usp=sharing

2) Construct the direct link http://docs.google.com/uc?export=open&id=your_file_id

3) Paste the direct link into a web browser and hit enter

4) Copy the resulting URL after you have been redirected by your browser Note: This will be a much longer URL that looks something like this: https://doc-XX-XX-docs.googleusercontent.com/docs/securesc/XXXXXXXXXXXXXXXXXXXXX/XXXXXXXXXXXXXXXXXXXX/000000000000000/0000000000000000000000/*/your_file_id?e=open

Using this final URL is the only way I could get my uploaded sound files to work with Actions on Google.

Foliate

hello, im using this link actually for streaming media files in an app: docs.google.com/uc?export=open&id=your_file_id does it have any daily limits or other restrictions? – Rubinstein

@MarcelDz I was able to use that format for a download link, but not as a link which works in an HTML <audio> tag. androi, same with your instructions. – Oceania

Answer 5

I was not able to get any cloud-based audio files to work with the HTML <Audio> tool, including all the tricks above. My internet service provider has public storage available for $0.95/month though, pretty reasonable. Here's what worked for me on a Blogger blog, and it should be adaptable to a website.

Put the following code in your template HTML at the top of your <body> section:

<script type='text/javascript'>
  function play(url) {
    var audio = new Audio(url);
    audio.play()
  }
</script>

Then in your post HTML replace the text you want to be clickable (call it CLICK_TEXT) with the following:

<a onclick="play(URL)">CLICK_TEXT</a>

where URL is the public URL of the .mp3 file you've saved to your ISP (or similar). CLICK_TEXT now shows up as a clickable link in your post, and clicking on it immediately plays the audio without a player or interface. I'm using this to play the audio for a foreign-language word or phrase in my blog and it works great.

Prynne