This feature makes use of react-use-audio-player library built on top of howler.js, a library that makes working with audio in the browser easier.

The library provides two hooks to work with audios in react. useAudioPlayer and useGlobalAudioPlayer. The implementation makes use of the latter hook since we need access to the same audio status, controls, and functions in different components i.e. the audio player component at the bottom and the audio cards.

All the audio controls and functions are provided by the audio hook and you just have to play with it to get the hang of it.

As for the audio files, for now they are static contents and are placed directly inside the public folder of the repo. This is not an ideal way to store and read audio files in real applications. So in real apps, you would store it in some CDN server and fetch from there and render it for the users to listen to the songs.