Friday, December 11, 2020

Playing audio file from Google Drive on Blogger

Blogger allows you to upload pictures and videos to blogs, but not audio files. But there is a way to do this, although it can be a bit "manual". The main idea is to find a place that can host your audio file, then use the HTML audio tag to play that file.

In my case, I want to host the file on Google Drive. But the link provided by Google Drive does not work with the audio tag, at least not directly.

I have been teaching myself to play the Chinese traverse flute. A few days ago, I started trying to learn to play "Michishirube". I made a short recording, and I will use that here as an example.

First, after recording the audio file, upload it to Google Drive. Then, on Google Drive, right click on the file, choose "Get link". Then set to "Anyone with the link" to allow the link to be accessed. The link looks like this.
https://drive.google.com/file/d/1k6gDgXJdbdPxtlqNoBEVDQOzAAJ4pOBz/view?usp=sharing
The part that is needed is the file ID, which in this case, is
1k6gDgXJdbdPxtlqNoBEVDQOzAAJ4pOBz
 
Then, in Blogger, switch to HTML view to add the audio tag. This is how it usually looks like
<audio controls="controls" src="https:// link to file">
</audio>

However, you cannot use the Google Drive link directly. The link that works with the audio tag looks like this:
https://docs.google.com/uc?export=download&id=fileID
where fileID is the one mentioned above.
 
So in my case, the final tag looks like this:
<audio controls="controls" src="https://docs.google.com/uc?export=download&id=1k6gDgXJdbdPxtlqNoBEVDQOzAAJ4pOBz">
</audio>

 
Hope this helps!

No comments: