HOW TO ADD AUDIO FILE TO BLOGGER WEBSITE
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.
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
1, How to add an mp3 audio player in blogger?
2.Method-1: using Audio iframe
3. Method-2: using HTML Audio tag
4.Video Guide
5.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 add then this any one of the methods below.
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 iframe code below 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 is the file id "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 successful 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 the HTML code.
#1: First copy the 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 audio 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 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 file by adding a caption in the format as shown in the code below.
<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.
- Remove Download Button from the Audio player.
This is one of the most requested feature for the audio player. Some website don't want there users to download the music. They just want the music to play online only. In that case you can remove the download button from the audio player.
To remove the download button from the audio player you need to add a small code snipper after the controls. Just add the code controlsList="nodownload"
<audio controls controlsList="nodownload"><source src="audio.mp3" type="audio/mpeg"></audio>
Here are the list of attributes that can be used in the HTMl 5 Audio tag.
VIDEO GUIDE
Video is coming
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.