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
<source src="https://drive.google.com/uc?export=download&id=1wSGIgxkCmY1Ru4Gy5mkv694E0-uTaR_g" type="audio/mp3"></source>