Thursday, March 12, 2015

Embedding Audio and Video Files from Google Drive into Blogger

I cannot take credit for what I am about to write.  The credit goes to one of my students in Music Tech class, Ryan Boelk, for coming up with this method.  He figured it out on his own after Soundcloud tagged one of his music uploads as containing third-party material (read my article "It's Not Fair" for more information on this issue.)  I'm writing about it here because I haven't tried it yet even though I have encouraged my students to try this method.  It's like the scientists who said that they invented cold fusion but no other scientists were able to replicate their methods.  I'm not only trying to replicate Ryan's methods, but also understand and improve on them.

Ryan's method for using Google Drive as a host for embedding music or videos into Blogger is as follows:
  1. Upload an audio or video file to your Google Drive.
  2. Once it's uploaded to Google Drive, click the Share button.
  3. Set sharing to "Public" for the widest audience.
  4. Copy that public sharing link. (e.g. https://drive.google.com/file/d/0B-Wtebd6y4ISeWZPMHdSellFclU/view?usp=sharing)
  5. Paste that link into the HTML side of a new Blogger post.
  6. Copy the "garbage" from the middle of the link (highlighted in green above)
  7. Paste the "garbage into the green portion of this HTML code: 
  8. Make sure it works by switching back to the Compose side and pressing the play button.
Ryan Boelk's HTML code for embedding an audio file from Google Drive :
<center><iframe height="100" src="https://docs.google.com/a/wlavikings.org/file/d/Place the "garbage" here/preview" width="300"></iframe></center>

My replication and modification of Ryan's Method for Audio and Video



This is the second audio file I tried to embed. The first one I tried, Jason Aldean's "Hicktown", showed an embedded audio player but it had no sound when the play button was pressed. I'm not sure why. My thought was that the MP3 file was nested a couple of folders deep on my Google Drive, so I went looking for an MP3 file on the root level of my drive. That one, my own arrangement for orchestra, chorus, and congregation for the 2002 WELS National Conference on Worship, Music, and the Arts from the of the hymn "The Tree of Life" worked.

So I started to play with the height and width parameters.  Ryan specified height = 100 and width = 300, but it seemed to give too much grey space for my liking above and below the audio transport controls and squished the transport so that play time and volume controls were on top of each other (as shown below), so I modified the numbers to height=60 and width = 450 (as shown above).  That also keeps the popout window button off of the transport controls.

I would love to be able to put a title or a caption on this embedded audio file, such as you can automatically do on a picture in Blogger. I'm doing some reading on HTML <caption> tags.  Hopefully, with a little experimentation, I'll figure it out.
Now for video.  After uploading a Garageband edited commercial soundtrack to my Google drive, I followed the same steps as in 1-8 above to embed the video into this article from Google Drive.  To my joy, it worked the first time.  It makes me wonder if the video link button on the editing toolbar in Blogger wouldn't do the same thing.  So, I tried it.  The video button allowed me to upload a video from my computer straight to this article.  It's the second video below (and the original 1st generation iPod commercial on which this project was based).
Video uploaded to Google Drive and embedded here using Ryan's method.
Soundtrack music replaced with Cyndi Lauper's "Girls Just Wanna Have Fun"
Video uploaded straight to Blogger using the video button on the editing toolbar.
Original 1st Generation iPod Commercial Video

Conclusion

In order to bypass copyright restrictions on Youtube or Soundcloud for education fair use applications, Google Drive can be used to host both audio and video files.  Embedding audio and video files from Google Drive is possible using an adaptation of an embed code from Google Docs.  The key to modifying the embed code is to paste a portion of the shared URL into an <iframe> HTML embed code as described above.  Audio files

26 comments:

  1. You have shared a very useful information with us. This a very nice music technology news blog. I would like to read more from here.

    ReplyDelete
    Replies
    1. Be on you best conduct. Look and notice great. Initial introductions are enduring impressions. motu patlu

      Delete
  2. Thank you for this information. Its the first time i have put een mp3 player on my website with mp3 store on a google drive without logging in. Do you know a way to do the same with the playlisy store on google drive

    ReplyDelete
  3. Thank you for this information. Its the first time i have put een mp3 player on my website with mp3 store on a google drive without logging in. Do you know a way to do the same with the playlisy store on google drive

    ReplyDelete
  4. thank you in advance, can you please tell me how to add download buttn to above shred link

    ReplyDelete
  5. thank you in advance, can you please tell me how to add download buttn to above shred link

    ReplyDelete
  6. It works great my only complaint is you can't change to any part of the song without the song restarting. I use Google Drive and Blogger.com.

    ReplyDelete
  7. Thanks so much for posting this how to!! I love the fact that your student researched this solution.

    ReplyDelete
  8. I almost never comment on blog posts. But that is what I've been looking for. I tried to do it with html audio tag code, but it would work for a time, then stop. So far, this works. I only wonder if Google would disapprove of it in some way? I can't imagine this would violate their terms of service. Thank you very much!

    ReplyDelete
  9. Just wanted to let you know, it seems to have a bit of trouble working in Firefox. Works great in Chrome though.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Work just right but would be able to manipulate it where I can do multiple files.

    ReplyDelete
  12. Watching TV with headphones!!! Is it possible? Yes it is with Wireless Headphones for TV. Today we are going to list the best wireless headphones for tv
    noise cancelling ear plugs

    ReplyDelete
  13. is it possible to make it loop the audio file?

    ReplyDelete
  14. very helpful.. just as we needed. thanks

    ReplyDelete
  15. Really nice and definitely it will be useful for many people. Kindly keep update like this.
    School website design uk

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. Hi, your article really helped me, please i'll like to also add an album cover to the audio, can you show me, am new to blogging, my site is www.toktok9ja.com

    ReplyDelete
  18. Thank you for sharing this. As a music blogger this sure helps, especially if the artist does not have a video or is on one of the streaming platforms.
    After a full afternoons work on trying to find out how to do this - several options with uploading to other sites - didn't pan out. So I'm glad the Google Drive option works, now I just have to make sure I'm not deleting the files in my Google Drive Folder, else the blog will not find them anymore.

    ReplyDelete
  19. Great information. Thank you for this! I've been looking for a solution and this is just what I needed. Now if I could get it to auto play

    ReplyDelete