How to Add MP3 Audio Player in Blogger Website
If you want to enhance your Blogger website with a smart and advanced MP3 audio player, you're in the right place. Whether you're adding it inside a post or in a gadget (sidebar/footer), this guide will show you exactly how to do it using a Google Drive audio file. This tutorial also provides support for advanced features like:
- ✅ Download button
- ✅ Playback speed control
- ✅ Autoplay option
🎼 Demo: Audio Player Example
You can click the Play button above to listen to the sample audio: "Welcome To This Website"
🔧 How It Works
This smart HTML5 <audio> player can be placed in your blog post or widget area. It enables listeners to:
- Control playback speed
- Download the MP3 file
- Autoplay audio (optional)
📌 Get Google Drive File ID
To add your own audio file:
- Upload your MP3 to Google Drive.
- Copy the shareable link.
- Identify the File ID between
d/and/view.
Example:
Shareable Link: https://drive.google.com/file/d/1a2B3cD4EFgh5678ijklmn/view?usp=sharing
File ID: 1a2B3cD4EFgh5678ijklmn
🧩 Embed Code: Standard MP3 Audio Player
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=ADD_GOOGLE_DRIVE_LINK_ID" type="audio/mpeg">
</audio>👉 Replace ADD_GOOGLE_DRIVE_LINK_ID with your actual File ID.
Customization Options
| Option | Description |
|---|---|
| controls | Displays default play/pause buttons |
| autoplay | Starts playing as soon as the page loads |
| loop | Repeats audio continuously |
| muted | Audio starts muted |
| preload | Controls if audio is preloaded (auto/none/metadata) |
🧩 Embed Code: Autoplay MP3 Audio Player
<audio controls autoplay style="width: 60%;">
<source src="https://drive.google.com/uc?export=download&id=ADD_GOOGLE_DRIVE_LINK_ID" type="audio/mpeg">
</audio>This version plays the audio automatically once the page loads.
🖼️ Image Reference
❓ FAQs
Q1: Can I use other file types?
A: The HTML5 <audio> tag mainly supports .mp3, .ogg, and .wav files. Use .mp3 for best compatibility.
Q2: Will autoplay work on mobile?
A: Most mobile browsers block autoplay unless the user interacts with the page. Use autoplay carefully.
Q3: Is Google Drive free to use for hosting audio?
A: Yes, within your available storage quota. For public access, make sure the file permission is set to "Anyone with the link can view."
Q4: Can I customize the audio player's size?
A: Yes, use CSS like style="width: 60%;" to control the player's width.
✅ Conclusion
Adding a smart MP3 audio player to your Blogger website is easy and effective. Whether you're running a podcast, adding background music, or sharing spoken content, this simple solution enhances user experience.
All it takes is a Google Drive link and some clean HTML!
