DEV Community 👩‍💻👨‍💻

Cover image for A Brand New 🔥 AUDIO PLAYER plugin for the commuity 😎
Sharad Raj (He/Him)
Sharad Raj (He/Him)

Posted on

A Brand New 🔥 AUDIO PLAYER plugin for the commuity 😎

I was free today so made (almost complete) a brand new AUDIO PLAYER PLUGIN named SharPlayer FOR the community.

UPDATED ON 13-04-2020, I've added a feature of clicking on the track duration bar to seek.

Here is how it looks



How can you use it ?

It's dead simple to use in any of your website.

Just grab these css links and put them in the head

Enter fullscreen mode Exit fullscreen mode

Put this where you want to display the player

 <div class="sharplayer" id="myplayer"></div>
 go ahead pick any id you like just make sure of sharplayer class  
Enter fullscreen mode Exit fullscreen mode

Not put at the end of closing body tag

 <script src=""></script>
Enter fullscreen mode Exit fullscreen mode

Now you are ready to feed audio files in the plugin ..... so here we go

      window.onload = function () {
        const song_list = [
        //   make new object of SharPlayer class
// first argument is the id of the element where you wanna show the player
// second takes an object with 3 required keys:
// tracks (an array of audio file urls
// title (a boolean, this has to be false for now since i am thinking to give the feature to add titles to the audio tracks so leave it false)
// artwork (a boolean, leave it false for now as well ... those black squares that you see will hold the images. Since the plugin is in development you can leave it as it is.
        new SharPlayer("player", { 
          tracks: song_list,
          titles: false, 
          artwork: false,
          .initPlayer() // call this function it's required
          .show(); //call this function it's required
Enter fullscreen mode Exit fullscreen mode

That's it Awesome !!!!! right 🤓🤓🤓🤓🤓🤓

All The links are here:

Github repo:
Live Demo:
Example code:

Thank you

Top comments (0)

19 Valuable Github Repositories for Beginners

19 Valuable GitHub Repositories for beginner devs looking to take the first step into the web development career.