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

Top comments (2)

Collapse
 
ben profile image
Ben Halpern

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

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

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

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›