How to Embed Audio File in a Blogger Site?

Are you blogger users, then these tutorials really help you. In this article, I will share a complete guide to embed audio files in a blogger site.

Are you blogger users, then these tutorials really help you. In this article, I will share a complete guide to embed audio files in a blogger site. There are two ways to embed an audio file in the blogger site. 

I will share all methods with examples. There are some tricks to embed an audio file in a blogger. The benefits of embed audio files are increase or decrease audio volume, download audio files, and edit audio HTML with CSS.




Embed with iframe

  • Step1: Download MP3 File
  • Step2: Copy the demo code below
  • Step3: Upload Audio File online. For eg: Google Drive
  • Step5: Copy Google Drive Link
  • Step6: Change the view into a preview on a link
  • Step7: Paste the code in an src attribute


 

 <iframe style = 'width:100%;' src="https://drive.google.com/file/d/1ia-3MoVmsnkv5ELRjpDa6JPRlSGOcrFy/preview?usp=sharing"></iframe>



Embed with Audio Attribute

Most of the time I used this <audio> attribute to embed audio in my site. It can provide all the controls and the default download buttons. I recommended to everyone if you want to embed audio in a site then used the audio attributes for best experiences.

  • Step1: Upload audio file on google drive
  • Step2: Convert google drive link with gdirect.link
  • Step3: Paste below embed code on an HTML view
  • Step4: Paste the link on the src attribute

Jupiter One - Riot



<audio controls>
      <source src="https://drive.google.com/uc?export=download&amp;id=1wSGIgxkCmY1Ru4Gy5mkv694E0-uTaR_g" type="audio/mp3"></source>
    </audio>