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
LIVE DEMO
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
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://sharadcodes.github.io/Shar-Player/src/css/sharplayer.css"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
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
-->
Not put at the end of closing body tag
<script src="https://sharadcodes.github.io/Shar-Player/src/js/sharplayer.js"></script>
Now you are ready to feed audio files in the plugin ..... so here we go
<script>
window.onload = function () {
const song_list = [
"audio_files/Faded.mp3",
"audio_files/on_and_on.mp3",
"audio_files/Cartoon_Howling.mp3",
"audio_files/bensound-anewbeginning.mp3",
];
// 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
};
</script>
That's it Awesome !!!!! right 🤓🤓🤓🤓🤓🤓
All The links are here:
Github repo: https://github.com/sharadcodes/Shar-Player
Live Demo: https://sharadcodes.github.io/Shar-Player/examples/first/index.html
Example code: https://github.com/sharadcodes/Shar-Player/tree/master/examples/first
Top comments (0)