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

57 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
  20. Hey, Why we can't view full screen?

    ReplyDelete
  21. It's an exactly what I'm try finding. Very useful ,easy ,most importantly it's practical. Thank you so..much. and if you successfully on picture cover coding Please make an update. Thank a lot again.

    ReplyDelete
  22. Bloggers who don’t have time or don’t like to read may prefer to listen to audio content or watch videos. BeyondPod allows you to subscribe, download, listen to audio podcasts and watch video podcasts on-the-go. This app is extremely useful for bloggers who are driving a lot because for them, there is very little reading time.

    ReplyDelete
  23. Bloggers who don’t have time or don’t like to read may prefer to listen to audio content or watch videos. BeyondPod allows you to subscribe, download, listen to audio podcasts and watch video podcasts on-the-go. This app is extremely useful for bloggers who are driving a lot because for them, there is very little reading time.

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

    ReplyDelete
  25. There is a scope of gear that falls into this classification, for example, information projectors, plasma and LCD screens, audio hardware, TVs, DVDs, VCRs, sounds frameworks and an assortment of gathering hardware. Audio visual equipment rental by americanaudiovisual.com

    ReplyDelete
  26. Performing audio transcription can be a period and asset expending assignment for lawyers, attorneys, court columnists, and different paralegals. Spanish Transcription

    ReplyDelete
  27. It has fully emerged to crown Singapore's southern shores and undoubtedly placed her on the global map of residential landmarks. I still scored the more points than I ever have in a season for GS. I think you would be hard pressed to find somebody with the same consistency I have had over the years so I am happy with that.
    audio transcription

    ReplyDelete
  28. You made such an interesting piece to read, giving every subject enlightenment for us to gain knowledge. Thanks for sharing the such information with us to read this... audio transcription

    ReplyDelete
  29. Thanks for the blog loaded with so many information. Stopping by your blog helped me to get what I was looking for. google transcription service

    ReplyDelete
  30. Wow, excellent post. I'd like to draft like this too - taking time and real hard work to make a great article. This post has encouraged me to write some posts that I am going to write soon. video transcription services

    ReplyDelete
  31. Troublesome audio quality, as the name recommends generally requires more endeavors and time because of the nature of the chronicle. french transcription

    ReplyDelete
  32. Thanks for sharing information. Here is some really good information about getting ready for audio and video song.

    https://twitter.com/ARTZisArtsy
    https://en-gb.facebook.com/ARTZisArtsy/
    https://www.instagram.com/artzisartsy/?hl=en
    http://youtube.com/anakinartz
    http://soundcloud.com/artzisartsy
    https://open.spotify.com/artist/2Ea17Du38j8jMGx5HbeUb8
    https://music.apple.com/us/artist/artz/1373277881

    ReplyDelete
  33. Many individuals put costly frames round their footage, which as a rule finally ends up exhibiting off the body and in lots of circumstances detracting from the image inside the body. If you want to learn more about this topic please visit here

    ReplyDelete
  34. This is important, though it's necessary to help you head over to it weblink: SennaGammour

    ReplyDelete
  35. Nice work, if you want to convert your mp3 file then use this converter;

    Files Converter Online

    ReplyDelete
  36. Hello, I read Your Post and Your post is really helpful. It's really Helpful for me also. I have a website like this. If you can record it, we can transcribe it! We support 29 languages! Quickly and Accurately Transcribe Speech to Text

    ReplyDelete