loading...
Cover image for Webcomponent 🔥 based PLAYER for the PODCAST Community  😎

Webcomponent 🔥 based PLAYER for the PODCAST Community 😎

sharadcodes profile image Sharad Raj ・1 min read

Hi Guys! 🤓

I've created a Webcomponent based Podcast player using Vanilla JS.
I've made it open source for the community.

Also the implementation is dead simple, just like other web components.

So here is how it looks:

UI

Shar-Pod-Audio-Player

LIVE DEMO

How to use ????

Just paste the following script in the head or just before the end of the body tag

<script src="https://sharadcodes.github.io/Shar-Pod-AudioPlayer/src/SharPodAudioPlayer.js" async></script>

Now inside the body paste this

  <!-- add the tag with all attributes -->
    <shar-audio
      audio-title="Your podcast title"
      audio-subtitle="Your podcast subtitle"
      artwork="https://example.com/your_square_thumbnail.png"
      src="https://example.com/your_mp3_file_url.mp3"
    ></shar-audio>

That's it 🤩 .... And you are good to go !!!!!!


ALL LINKS ARE HERE:

Repo: https://github.com/sharadcodes/Shar-Pod-AudioPlayer
Live Demo: https://sharadcodes.github.io/Shar-Pod-AudioPlayer/example/ 🤩

Posted on Jan 19 by:

sharadcodes profile

Sharad Raj

@sharadcodes

Full Stack Developer | Intel AI Edge Scholar 2019 | Google India Scholar 2018

Discussion

markdown guide
 

Neat! I'm going to play around with this.

 

Thanks Ben.... Would love to see the stuff you do 🐒