Stylish HTML5 Audio Player Using Media Elements.js (Integration)

Stylish HTML5 Audio Player Using Media Elements.js (Integration)

See Video Documentation :- 

Steps :- 

 1. Here a Simple HTML5 Audio Tag .

    <div class="players">
        <audio id="player2" preload="none" controls style="width: 450px;">
            <source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3" type="audio/mp3">                
        </audio>
    </div>

    

2. Add Css and Javascript CDNs .

    

1. Css CDN

    <!-- Css library -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelementplayer.css">              

2. JavaScript CDN

   
   <!-- JS Library by CXDI -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelement.js"></script>
   
   

3. Now You Have Successfully Added Your MediaElements.JS Audio Player ...

See Preview :- 

For Audio Player Customising 

<style>
   .mejs__container {
       background: hotpink;

    }
   .mejs__time-slider {
      background-color: blue;
   }
</style>