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:

  1. Upload your MP3 to Google Drive.
  2. Copy the shareable link.
  3. 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

How to add mp3 in HTML

❓ 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!

Post a Comment