Overview: Development Summary

In this project, we developed a lyric player using React. We converted lrc files to JSON and used this data to display lyrics synchronously with the audio. Users can click on any word to get its definition, and we used React's useRef hook to manage the audio player's current time. We made this project highly interactive with the use of a scoreboard and a definition modal.

LRC file

An LRC file is a format that synchronizes song lyrics with an audio file. It is often used in karaoke to display the lyrics as the audio plays.

Converting LRC to Json

Converting an lrc file to JSON is a simple way of making the lrc file data more usable in our React application. JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy to read and write for humans and easy to parse and generate for machines. Since we intend to upload our song information on Firebase Realtime DB, which is highly compatible with JSON, we convert the lrc file to JSON format.

Components

• LyricPlayer: The parent component that renders the Definition modal, Lyrics, Player, and Scoreboard components.
  • Definition: A modal that can pop up when a user clicks on a word in the lyrics to show the definition of the word.
  • Lyrics: A component that displays the current line of the lyrics based on the current time of the audio player.
  • Player: A component that controls the audio playback and updates the lyrics component.
  • Scoreboard: A modal that is shown when the song has ended, displaying a random score and saving the user’s score to the real-time database.

React hook: useRef

The useRef hook in React is used to access the properties of a component. In this project, we are using it to access the audio player's current time and use that time to highlight the current line of lyrics.

Key functions

• handleTimeUpdate: This function is triggered whenever the time of the audio player changes. It uses the current time of the audio player to determine which line of the lyrics to highlight.
• scrollToHighlightedLine: This function scrolls the lyrics component to the current line whenever it changes.
• <audio> tag and adding controls, listening to onTimeUpdate and onEnded: The audio tag is used in HTML to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the source element. Here we're adding controls to it, and listening to events like 'onTimeUpdate' and 'onEnded' to manage the display of the lyrics and other interactive components.

Resources

GitHub - frmichetti/react_karaoke