How To Add MP3 Audio Player In Blogger

5/5 - (2 votes)

How To Add MP3 Audio Player In Blogger: Adding MP3 Audio Player in Blogger is not so easy task but we make it easy for our audience. In this articel, I will show you how to upload audio files on blogger and also show you how to embed MP3 Audio Player very easily in your blog post.

How To Add MP3 Audio Player In Blogger

How To Add MP3 Audio Player In Blogger?

Here in this post, I will share with you the best method to add an mp3 player to a blogger. You just need to follow the given below step-by-step tutorial.

Step 1: First of all, Go to your Google Drive account and upload the audio file or mp3 to your drive.

Step 2: Click on the share button.

Step 2: Click on the share button

Step 3: Now, on the General access section give access to “Anyone with the link” and click on “Copy link” to copy the link.

Step 3: Now, on the General access section give access to "Anyone with the link" and click on "Copy link" to copy the link.

 

Step 4: Copy the given below code and change the ID with your Google drive link ID.

https://drive.google.com/uc?export=download&id=ID

For Example:

My Google drive link: https://drive.google.com/file/d/1c3T-JzhtgYrdMiBvF8lrAB4LJVII8MH4/view?usp=sharing

So ID of the mp3 file is 1c3T-JzhtgYrdMiBvF8lrAB4LJVII8MH4.

Now, after replacing my new drive link: https://drive.google.com/uc?export=download&id=1c3T-JzhtgYrdMiBvF8lrAB4LJVII8MH4.

Step 5: Copy the new link e.g https://drive.google.com/uc?export=download&id=1c3T-JzhtgYrdMiBvF8lrAB4LJVII8MH4 and paste it to the given below code in place of ADD MP3 DRIVE LINK.

<audio controls>
<source src='ADD MP3 DRIVE LINK' type="audio/mpeg">
Your browser does not support the audio element.
</audio>

So, the Final code is given below:

<audio controls>
<source src='https://drive.google.com/uc?export=download&id=1c3T-JzhtgYrdMiBvF8lrAB4LJVII8MH4' type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Step 6: Now the final code is ready to paste on the “HTML section” of your blog post.

Now you can successfully place the MP3 Audio Player In Blogger.

Checkout: How to add a multiple choice question (MCQ) in Blogger?

How to add a caption file to your audio player?

You can easily add a caption file to your audio player by adding a caption attribution shown below.

<figure >
<figcaption>Listen to the the audio file</figcaption>
<audio controls>
<source src='https://drive.google.com/uc?export=download&id=1c3T-JzhtgYrdMiBvF8lrAB4LJVII8MH4' type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</figure>
<style>figure {margin: 0;} </style>

Wrapping Up

In the above way, you can easily add an MP3 Audio Player In Blogger.

Finally, we hope this article can help you to understand “How To Add MP3 Audio Player In Blogger”. If you really think this article helps you then don’t forget to appreciate our efforts in the comments below. For more blogging tutorials, stay connected with us.

For the latest tech news & blogging Tutorials, follow TECH FOR U on TwitterFacebook, and subscribe to our YouTube channel.

Read More:

1 thought on “How To Add MP3 Audio Player In Blogger”

Leave a Comment