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 user can easily control media playback, change volume and even download the audio file. 


How To Add Audio File To Blogger Website


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


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.

set mp3 file link in Google drive to public

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

<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 of 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 attribute 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>
  <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. alert-warning

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. 


audio player with caption preview

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 Telegram discussion group

You can also check more guide on Blogger here.➔ BLOGGER GUIDE


Read AlsoHow to Lazy load embedded YouTube videos in Blogger?

Don't Add Links as it goes to spam. Share yours valuable feedback. Thanks

Post a Comment

Don't Add Links as it goes to spam. Share yours valuable feedback. Thanks

Post a Comment (0)

Previous Post Next Post