DEV Community

Cover image for Webcomponent πŸ”₯ based PLAYER for the PODCAST Community  😎
Sharad Raj (He/Him)
Sharad Raj (He/Him)

Posted on

Webcomponent πŸ”₯ based PLAYER for the PODCAST Community 😎

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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/ 🀩

Discussion (2)

Collapse
ben profile image
Ben Halpern

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

Collapse
sharadcodes profile image
Sharad Raj (He/Him) Author • Edited on

Thanks Ben.... Would love to see the stuff you do πŸ’