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

Source: YouTube

How To Add Audio File To Blogger Website?

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. 

Using Audio iframe

You can embed an mp3 audio file to your blogger website by using the traditional HTML audio iframe method. 

• First of all, Go to your Google Drive account and upload the audio file from the computer. 
• Now right-click on the file and click on the "Get link" option. 
• Here change the permission from restricted to Public (anyone with the link) and copy the file link.
• 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 "1blUyIowvHpBEAGuPwqJTBnYP0IxkSF32". 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.  
• Now paste the whole code into the HTML section of your blog post and save the changes.

Using HTML Audio tag

To add an audio file to your Blogger post with a download option, you can use the audio tag that was introduced in HTML 5. 

This method gives your audio player a minimalist and professional look. To implement this method, you will need to upload your audio file to a cloud storage service, such as Google Drive, and then add the HTML code to your post.

• First, copy the file link from Google Drive in a notepad. 
• 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>

• Now paste the code in the HTML section of your blog post and hit the publish button. 

Here, note that you have to use the Google Drive direct Link instead of the preview link in the Source field (src). You can use our G-Drive Direct Link Generator tool for that. 

For Learning Visit Wordpress Development Hong Kong !

Customize the Audio player options. 

You can customize the audio player by using attributes like autoplay, loop, muted, etc. You can also style the player with CSS and add a caption above it.

Add Autoplay mp3 Audio Player

Just add an autoplay attribute after the controls in the audion tag as shown below. 

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

To enable autoplay with muted playback, simply add the "muted" attribute after autoplay. 

However, it's important to note that some Chromium-based browsers, such as Chrome, may block autoplay in certain situations to optimize user experience. 

If you want to customize the width of the audio player, you can do so by adding an inline style element like this.

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

By changing the value, you can adjust the width of the audio player. For instance, you can set it to 80%.

Add a caption to the audio file

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

Remove the Download Button from the Audio player.

This is one of the most frequently requested features for an audio player. On some websites, users are not allowed to download music and the website owners prefer the music to be played online only. To cater to this requirement, it is possible to remove the download button from the audio player.

To remove the download button from the audio player, add a code controlsList="nodownload" snippet after the controls. 

<audio controls controlsList="nodownload"><source src="audio.mp3" type="audio/mpeg"></audio>

Here is the list of attributes that can be used in the HTML 5 Audio Tag.