Project Architecture
The main page displays essential components including player controls, a top album slider, a list of top songs, and the top 6 albums to facilitate navigation and song control.
React's useContext hook handles efficient tracking of user-selected data and page navigation, simplifying global state management for displaying selected albums and songs without page refreshes.
Playing Songs with Audio Controls
Global state tracks the audio control component, selected song, song duration, current timestamp, and play/pause status.
Play and Pause
Selecting a song updates the selectedSong state and attaches an audio DOM reference via the useRef hook.
Next Song and Previous Song
A function searches albums to locate the selected song's parent album, simplifying navigation between tracks.
Fast forward and Rewind
An HTML range input slider lets users navigate song duration. The dragHandler function synchronizes audio playback with the slider's position by updating the currentTime property.