lyric.ts:也包含一个 parseLyric 函数,用于解析歌词。 tailwind.config.js:Tailwind CSS 的配置文件,用于定义项目中使用的样式规则、颜色、动画等。 music-player.tsx:音乐播放器的主要逻辑文件,包含播放器的状态管理、音频加载、播放控制等功能。主要功能音乐...
Audio data structure in the player: interfaceIAudio{/*Audio link*/src:string/*author*/artist:string/*audio name*/name:string/*audio image*/img:string/*audio ID*/id:string/*lyrics*/lyric?:string/*lyric translation*/tLyric?:string/*disabled or not*/disabled?:boolean/*reasons for being disab...
Audio data structure in the player:interface IAudio { /*Audio link*/ src: string /*author*/ artist: string /*audio name*/ name: string /*audio image*/ img: string /*audio ID*/ id: string /*lyrics*/ lyric?: string /*lyric translation*/ tLyric?: string /*disabled or not*/ ...
{ return musicItem; }, /** 获取歌词 */ getLyric: function (musicItem){ return { lrc: 'http:///', //歌词源, rawLrc: '[00:00.000]这是一句歌词', //纯文本的歌词 } }, /** 获取专辑详细信息 */ getAlbumInfo: function (albumItem) { return { ...albumItem, musicList: [] } }...
npm install react-jinke-music-player --save 🖼️ Screenshots mini mode Light Theme Dark Theme mobile ✨ Feature list [x] Beautiful ui and animation [x] Responsive [x] Support theme switch [x] Support typescript (d.ts) [x] Support lyric ...
React lyric,React song by The Pussycat Dolls,seed music provides free online trial listening, if you like it, please share it with your friends
.sprite_player { background: url(../img/playbar_sprite.png) no-repeat 0 9999px; } .lyric-css .ant-message-notice-content { position: fixed; left: 50%; bottom: 50px; transform: translateX(-50%); background-color: rgba(0,0,0,.5); ...
解决: index如果没有变不需要dispatch(index和currentLyricIndex对比) 实现效果展示歌词 使用Antd Message组件 修改内置样式 实现效果到现在我们已经完成「网易云音乐PC」首页基本功能,相信你对React全家桶已经是比较熟练了,接下来想往哪方面扩展可以自行补充完善功能(不过相信能看到这里的小伙伴估计没几个)😂; 如果文章...
}const resTwo = await getLrcWithIdReq(data);if (resTwo.data.code === 200) { let lrcArr = handleDataLrc(false, resTwo.data.lrc.lyric); setLrcData(lrcArr); }const resthree = await commentMusicReq(data);if (resthree.data.code === 200) { ...
} return lyricList }复制代码 1. 2. 3. 4. 5. 6. 完成效果如下图 拿到当前播放的歌词 在歌曲播放的时候会有一个 currentTime 变量, 拿到这个变量和当前播放的歌词中的 time 进行比对, 小于歌词中time,之后获取索引值-1(要展示的歌词是前一句) ...