Thursday 15 October 2020

Demo of Embedding Audio Files to Blog

Hello Readers!

Embedding video and audio files are necessary for better user-friendly experience, when you are using your own website or running your blog pages. It was only in 2008 when HTML5, an advanced version of HTML was introduced. After that many enthusiast developers made it easy to use. Though many machine languages such as Java, CSS, Python are coming with more simple interface. Publishing and uploading content on web is based on such machine languages.


I wanted to embed the audio file in blogger since long and finally I could make this happen. Here is the embedded song for demo. Play the audio file below. Download it if you like.


This way you can also embed your own voice as audio file. If you are interested in podcasting and recording your talks and lectures then this is the best method. It can be helpful in teaching also. Let's see the process step by step.

Steps 1: Copy the following code to your blogger page. Remember, paste this code only in the HTML editor, not in composing mode.

<audio controls src="https://docs.google.com/uc?export=open&amp;id=XXXXXXXXXX"> </audio>

The highlighted text will be the ID of the audio file. This can be found in the link you've copied from Google Drive.

Step 2: Upload the audio file to the Google Drive. You will find the file uploaded like this. . .



Step 3: Right click on the file and click on share.

Step 4: You will see a sub window opened for sharing permissions. Click on Get Link Copy only this portion of the link. As mentioned in the image below. Only the highlighted part is important to copy.


Step 5: Go to Blogger HTML page again. And paste it like it is shown below.
Please be careful while pasting the link because every element of the code is important.

<audio controls src="https://docs.google.com/uc?export=open&amp;id=paste the highlighted part here"> </audio>

Step 6: Publish your blog. You will see the embedded audio just the way the song you've listened. You'll also be able to download the audio.

Thank You!

These resources helped me a lot while learning this process.

No comments:

Post a Comment