lyric animated highlight color

Question

I had googling few hour but still don't have any idea, I am using this component to display the lyric react-native-lyric

But is that anyway that I can highlight the font color(green) like the image at below? Any advice? thanks

Here are my code

<Lyric
            style={{ height: 500 }}
            lrc={lrc}
            currentTime={this.state.currentTime}
            lineHeight={40}
            activeLineHeight={50}
            lineRenderer={({
              lrcLine: { millisecond, content },
              index,
              active,
            }) => (
              <Text
                style={{
                  fontSize: 30,
                  textAlign: "center",
                  color:  "gray",
                }}
              >
                {content}
              </Text>
            )}
          />

score 0 · Answer 1 · answered Jun 26 '22 at 00:10

Using your <text> in the code you could try changing the style. If you haven't used this, then you can easily add it to your lyric line renderer. If you upload your code, I can be more clear.

  <Text
    style={{ color: active ? 'green' : 'gray' }}>
    {content}
  </Text>

Change out the 'green' for whatever color you'd like. This will change the color based on the current active lyric. So if the lyric is not active it will be gray and if it is active it will be green.

Hope this helps!

You can also then style your buttons to match the active color if you'd like

Hi，thanks I already upload my code. But how to highlight lyric character by character. Your example should be highlight whole paragraph — user998405, Jun 26 '22 at 05:23

score 0 · Answer 2 · answered Jul 01 '22 at 00:37

Assuming performance isn't an issue with the 1ms timer, here's one way you could do it:

import Lyric, { parseLrc } from 'react-native-lyric'

// simple 1ms timer, you probably have the player providing this value
const [currentTime, setCurrentTime] = useState(0);
useEffect(() => clearInterval(setInterval(() => setCurrentTime(ct => ct + 1), 1)), []);

const lrcJSON = parseLrc(lrc); // get the lyrics in JSON form
const lineRenderer = ({ lrcLine: { millisecond, content }, index, active }) => {
  const nextLine = lrcJSON[index + 1]; // get the next lyric so we know how long it is until it appears
  const percentComplete = (nextLine.millisecond - millisecond) / currentTime;
  const letters = content.split('');
  const wordsLength = letters.length;
  const activeBoundary = Math.floor(wordsLength * percentComplete);
  const activeLetters = letters.slice(0, activeBoundary).join('');
  const inactiveLetters = letters.slice(activeBoundary, wordsLength).join('');
    
  return (
    <Text style={{fontSize: 30, textAlign: "center"}}>
      <Text style={{color:  "green"}}>
        {activeLetters}
      </Text>
      <Text style={{color: "grey"}}>
        {inactiveLetters}
      </Text>
    </Text>
  );
}

It's not optimized or tested, but it should work!

score 0 · Answer 3 · answered Jul 01 '22 at 22:54

To achieve an even smoother effect than coloring the lyrics character by character, you could use a linear gradient from green to white as the background for each line of the lyrics combined with backgroundClip: 'text' and a transparent text color. The percentage of colored text can be adjusted by setting the break point between green and white in the gradient.

Here's a simple example in plain HTML/CSS/JS. The basic concept should be fairly easy to implement, although note that React Native doesn't natively support linear gradients, so you'll have to use a library like this.

lyric animated highlight color

3 Answers3