×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Playing audio after the page loads in html5
Share Google Drive Audio by HTML - HTML 5
3469    Arnab De    13/01/2019

Now a days we are widely use some audio hosing sites like SoundCloud. Here we upload our own sound clipsin MP3 format. After then we embed the sound in any other webpages.

But for that we must create an account on that sites. But more or less all of us have an account in google. Which give us a free 10GB space in google drive. We can use this space for sharing the audio. Google drive MP3 player can embeded in any web sites. But that website must supports the <IFRAME> tag. Any sites which design using wordpress, Blogger, Medium or any new Google Sites. For that, we must follow the following steps

softetechnologies
  1. Upload the MP3 song to Google Drive

    Open drive.google.com and login with your user name and password. Now upload the MP3 file. Now right click on the file and click on share menu. Now set the sharing permission to "Anyone on the Internet can find and view". And copy the shearing URL.

    share google drive audio
  2. Generate the Player Embed Code

    Now click on Get Sharable Link and copy the shearing URL. The link are generally like,

    https://drive.google.com/file/d/1MA5TVnja7jW498/view?usp=sharing
    share google drive audio
  3. Embed the <IFRAME> into another site

    Now you have to replace /view with /preview and placed the modified URL in an <IFRAME> tag as shown below:
  4. <iframe
    frameborder="0"
    width="400"
    height="200"
    src="https://drive.google.com/file/d/1234xyz/preview">
    </iframe>
softetechnologies

Now we can place the above code at any .html or equvalent file (.php, .asp, .aspx, .jsp etc.) file and complle it in any browser an audio player displayed on web page now we can easily play the audio using that controls.

share google drive audio
Playing audio after the page loads in html5
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Sri Sri Ramakrishna Paramahamsa
Do yourself what you wish others to do.
Sri Sri Ramakrishna Paramahamsa
3241
57.29
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     43551
01/01/2018     36485
25/06/2018     35498
28/06/2017     34551
02/08/2017     32982
01/08/2017     27463
06/07/2017     27212
15/05/2017     26845
14/07/2017     22461
21/04/2018     21111
softetechnologies