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

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

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!

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>

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.