CodeNewbie Community 🌱

edwteja2198
edwteja2198

Posted on

How do I create a Player for a Podcast using RSS Feed?

I am building a website using html, css and bootstrap for my podcast, my problem is that I want to put a player of the podcast in the hero image part of the website so people can come and listen to my podcast at the moment of entering into the website. I want the player to use the RSS Feed of my podcast to always update the player with the latest episode, I hace been trying to look for a solution for that but I have found anything. I made an account here on stack overflow to reach some expert on this field to help me with this problem. I am so frustrated ToT

Top comments (3)

Collapse
 
michaelcurrin profile image
Michael Currin • Edited

The first bit to solve how to get the latest (first) item in an RSS feed (which is XML data) using JS.

This tutorial covers that. Instead of forEach, you just need one item.

Like with myArray[0]. And find the url or similar attribute.

css-tricks.com/how-to-fetch-and-pa...

Once you have that item, you can use it in an audio player. Perhaps using the HTML5 builtin audio player.

Tutorial w3schools.com/html/html5_audio.asp

I would recommend making the player an existing HTML on the page. Maybe with empty string for the URL and mark it as hidden or grayed out.

So to put it all together:

Load the RSS and parse it.

Look for a value in the first item.

And whatever value you get out as a URL, you set that on the existing audio element. And mark it as enabled or no longer hidden.

Collapse
 
michaelcurrin profile image
Michael Currin

If you run into issues, then post your partially working JS here maybe as a gist.

Including the RSS URL.

Collapse
 
amanda profile image
Amanda

"The element in a podcast contains an URL to the stream (often a mp3).

This could be fed into an element (please offer controls)."

From @AndreJaenisch on Twitter