Podcast-Widget

//Psuedo-Code app.jsx RSS - componentdidmount

set data as array of objects in the state

rss-parser -> turn javascript object

state = podcastdata { title: pocast ep 1 } { podcast ep 2 }

render() { }

-podcast-playlist

-podcast-episode

Making a playlist I'm thinking we can create some controls for the play,pause, next and previous. Then we can load the .mp3 url of the selected file (depending on where which on we click) into a single html audio element. You would need some states: boolean for if the playlist is playing, an index for the selected track, and maybe a state for the currently playing mp3 file url from the rss feed.

States: feed: rss feed (feed.items contains all track data) playing: boolean trackIndex: integer currentTrackUrl: string

Functions: see https://www.w3schools.com/jsref/dom_obj_audio.asp

playpause() { play or pause depending on the playing state do function to play/pause audio element update playing state }

next() { -run playpause() -get current index then ++ to the next index (if current index is at end of tracks go to first index) -with that index, get the audio and set currentTrackUrl state to new url -play player -run playpause() }

previous() { -run playpause() -get current index then -- to the prevoius index (if at start of tracks go to last index) -with that index, get the audio and set currentTrackUrl state to new url -play player -run playpause() }

Steps

1. Create some buttons that will control which file is playing
2. Create one audio tag element that will contain the loaded url
3. If the currently playing state is empty then load the first track, otherwise continue the track that it's on
4. You'll have to move the audio out of episode and into app.jsx
5. You can do an onclick on the loop for displaying each audio track