How To Add Audio File To Blogger Website [Updated Method]

 In this article, I will show you how to upload audio files in blogger and set this to autoplay mode. Here in this method users can easily control media playback, change volume and even download the audio file. 

There is two way you can add audio files in blogger. One is by the traditional iframe method and the other one is by the audio tag method.

Table of Contents

• How to add an mp3 audio player in blogger?
• Method-1: using Audio iframe
• Method-2: using HTML Audio tag
• Video Guide
• Conclusion

How to add an mp3 audio player in blogger?

To add an audio file in blogger, you have to host the mp3 file in cloud storage and then add this to any one of the below methods. 

Method-1: using Audio iframe

You can embed an mp3 audio file to your blogger website by using the traditional HTML audio iframe method. 

#1: First of all Go to your Google Drive account and upload the audio file from the computer. 

#2: Now right-click on the file and click on the "get link" option. 

#3: Here change the permission from restricted to Public (anyone with the link) and copy the file link.

#4: Now copy the below iframe code and replace it with your own file id.

XML Code. 

<iframe   src='https://drive.google.com/file/d/1blUyIowvHpBEAGuPwqJTBnYP0IxkSZl4/preview?usp=sharing' 
   width='100%'
   frameborder='0'
/>

Here the file id is "1blUyIowvHpBEAGuPwqJTBnYP0IxkSZl4". Change it with your own file id. 

Or you can replace the whole URL with your own URL and change the "view" to "preview" in the URL.  

#5: Now paste the whole code in the HTML section of your blog post and save the changes. 

Now, you have successfully added an audio iframe to your blogger website. 

Method-2: using HTML Audio tag

You can add an audio file in blogger with a download option using the audio tag introduced in HTML 5.  Here in this method, the audio player looks minimalist and professional.

Here also, you have to follow the same method of uploading the audio file in Cloud storage like Google Drive and add the HTML code. 

#1: First copy the file link from Google drive in a notepad. 

#2: Now copy the below HTML code and replace it with your own file id. 

<audio controls>
  <source src="https://drive.google.com/uc?export=download&id=1blUyIowvHpBEAGuPwqJTBnYP0IxkSZl4" type="audio/mpeg"/>
</audio>

#3: Now paste the code in the HTML section of your blog post and hit the publish button. 

➤ Customize the Audio player options. 

You can further customize the audio player by adding some attributes like autoplay, loop, muted, etc in the audio tag. You can also customize the audio player using CSS and add a caption above the audio player. 

➤ Add Autoplay mp3 audio Player

Just add an autoplay attribute after the controls in the audion tag as shown below. 

<audio controls autoplay muted >
  <source src="https://drive.google.com/uc?export=download&id=1blUyIowvHpBEAGuPwqJTBnYP0IxkSZl4" type="audio/mpeg"/>
</audio>

You can also set autoplay along with muted playback by adding the "muted" attribute after autoplay. 

Here note that some chromium-browser like Chrome blocks autoplay functionality in some cases to maintain a better user experience. 

You can also set the width of the audio player by adding an inline style element like this. 

<audio controls autoplay style="width: 60%;">
  <source src="https://drive.google.com/uc?export=download&id=1blUyIowvHpBEAGuPwqJTBnYP0IxkSZl4" type="audio/mpeg"/>
</audio>

Here you can change the width of the audio player by changing the value. (here 60%)

➤ Add a caption to the audio file

You can set a caption to your audio file by adding a caption in the format as shown in the below code. 

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

You can check the preview here. 

Video Guide

Conclusion

Now you have learned how to add an mp3 audio file to blogger and customize the audio player. If you have any doubt regarding Blogger, you can ask me in the comment section or join our.