How To Add Audio Player/File in Blogger? Embed Audio

Hello Everyone! Welcome Back to TechiFeed. I have written a new informative post for you to read. So, Keep reading to find out more!

How to add audio files to Blogger and have them play automatically. Users may manage media playing, alter the volume, and even download audio files using this manner.

You may add audio files to Blogger in two ways. One uses the standard iframe approach, and the other with the audio tag technique.

Adding Audio in Blogger

To upload an audio file to Blogger, first host the mp3 file in cloud storage & then add it to any of the ways listed below.

Method 1: Using an Audio Iframe

Using the classic HTML audio iframe approach, you may embed an mp3 audio file into your blogger page.

Step 1: First and foremost, Upload the audio file from your PC to your Google Drive account.

Step 2: Select "get the link" from the context menu after right-clicking the file.

Step 3: Change the access from restricted to Public (anyone with the link) in this section), then copy the file URL.

Step 4: Copy the iframe code below and replace it with your file id.

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

The file id, in this case, is "1blUyIowvHpBEAGuPwqJTBnYP0IxkSZl4". Replace it with the file id of your choice.

Alternatively, you may replace the entire URL with your own and change the "view" to "preview" in the URL.

Step 5: Finally, copy and paste the entire code into the HTML area of your blog post and save the modifications.

You have just added the audio iframe to the blogger website.

Method 2: Use the HTML Audio tag

Using the audio tag introduced in HTML 5, you may upload an audio file to Blogger with a download option. The audio player, in this manner, seems simple and professional.

You must repeat the process of uploading the audio recording to a cloud storage service such as Google Drive and adding the HTML code.

Step 1: Open a notepad and copy the file URL from Google Drive.

Step 2: Copy the HTML code below and replace it with your file id.

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

Step 3: Copy the code and paste it into the HTML area of your blog article before hitting the publish button.

Configure the Audio Player Options

You may further personalize the audio player by using features in the audio element such as autoplay, loop, muted, etc. You may also use CSS to personalize the audio player and put a caption above it.

Include an Autoplay MP3 Audio Player

As demonstrated below, add an autoplay property to the audio element after the controls.

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

You may establish autoplay and muted playback by adding the "muted" feature after autoplay.

It should be noted that some chromium browsers, such as Chrome, disable autoplay capabilities in specific circumstances to provide a better user experience.

You may also change the width of the audio player by inserting an inline style element like this one.

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

By altering the value, you may adjust the width of the audio player. (here, 60%)

Include a caption with the audio file.

You may add a caption to your audio recording by entering the code in the type shown 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>

Remove the Audio Player's Download Button

It is a frequently requested feature for the audio player. Some websites do not allow their users to download music. 

They want the song to be available online. You may then delete the download button from the audio player.

To remove the download button from the audio player, put a little line of code after the controls. Add the code controlsList="no download" to your page.

<style>figure {margin: 0;} </style>

Video Tutorial

Frequently Asked Questions

How do I add an audio player to my Blogger blog?

To add an audio player to your Blogger blog, you can use the HTML/JavaScript gadget to insert the code for an audio player, such as the HTML5 audio tag or a plugin from a third-party service like SoundCloud.

Can I use a plugin to add an audio player to my Blogger blog?

Yes, you can use a third-party service like the SoundCloud plugin to add an audio player to your Blogger blog. These plugins provide an easy-to-use interface and additional features like playlists and track information.

How do I add an audio file to my audio player on Blogger?

To add an audio file to your audio player on Blogger, you can either use the HTML5 audio tag and specify the source of the audio file or use a plugin from a third-party service that allows you to upload and manage audio files.

Can I customize the appearance of my audio player on Blogger?

Yes, you can customize the appearance of your audio player on Blogger by editing the CSS styles associated with the audio player. Some third-party plugins also provide options for customizing the arrival of the player.

Can I add multiple audio players to my Blogger blog?

Yes, you can add multiple audio players to your Blogger blog by using the HTML/JavaScript gadget multiple times and inserting the code for each player or using a plugin that allows you to create and manage various players.

How can I ensure the audio player will work on all devices?

To ensure that the audio player will work on all devices, you should use a plugin that uses the HTML5 audio tag, as this is supported by most modern web browsers and mobile devices. It may not work on all devices if you use a plugin that requires a specific browser plugin (Flash).

Go to Link