-->
Home
Posts

How to add embed music and video player on your website

1 minute read

 Audio file in your website





you can edit in HTML view not compose view 

first you can audio file upload on your drive and get link 

<iframe   src='https://drive.google.com/file/d/1GmGp-AjLX-3wulRYlmnx5d3vpmrR1mom/view?usp=sharing' 
   width='100%'
   frameborder='0'
/>
This old music UI 

 





src='your audio file link'

*****************************************************************************


USING HTML AUDIO TAG:-
______________________________



code:-

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


red color is audio ID you can change your audio file ID

example:-

https://drive.google.com/file/d/1mdwkDUDRM-WrckL17RKBo9pCkPaJ4MCg/view?usp=sharing

this is your audio ID 

There are two button and three option 
volume, downlaod, playback speed

New Audio UI



***********************************************************************************
If you automatic play song you copy past this code:-


<audio controls autoplay>

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

</audio>

**********************************************************************************

Audio length:- 

 change your width size as your wish 

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

*******************************************************

if you add caption try this code:-

<figure >
    <figcaption>Sivan song</figcaption>
    <audio controls
        src="https://drive.google.com/uc?export=download&id=1mdwkDUDRM-WrckL17RKBo9pCkPaJ4MCg" type="audio/mpeg"/>
            Your browser does not support the audio element.
    </audio>
</figure>
<style>figure {margin: 0;} </style>


change you name = <sivan song >

if  you add caption to view this once 









**********************************************************************************
Direct link generator website:-

Paste your link and get direct link 








Post a Comment