React歌词滚动效果（跟随音乐播放时间滚动）

最新推荐文章于 2024-10-18 12:55:42 发布

点点关注不迷路

最新推荐文章于 2024-10-18 12:55:42 发布

阅读量2.7k

点赞数 15

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_51526447/article/details/136282481

版权

文章讲述了如何在音频播放过程中，利用React和Redux技术实现实时更新歌词高亮并同步滚动，通过监听`onTimeUpdate`事件获取当前播放时间，结合`useMemo`和`useEffect`优化性能，确保歌词跟随播放进度无缝切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先给audio绑定更新时间事件

	const updateTime = e => {
		console.log(e.target.currentTime)
		setCurrentTime(e.target.currentTime);
	};


	<audio
				src={currentSong.url}
				ref={audio}
				onCanPlay={ready}
				onEnded={end}
				onTimeUpdate={updateTime}
			></audio>

当歌曲播放时间改变的时候会触发updateTime事件，如下所示

歌词json格式

[
    {
        "time": 2,
        "content": "采样曲：願い~あの頃のキミへ~",
        "contents": [
            "采样曲：願い~あの頃のキミへ~"
        ]
    },
    {
        "time": 12,
        "content": "中文填词：一只然",
        "contents": [