一个基于React + TypeScript + Vite的音乐播放器应用,支持Apple Music风格的歌词展示。
# 安装依赖
bun i
# 启动开发服务器
bun dev
# 构建生产版本
npm run build
编辑 src/list.ts 文件,替换 trackList 数组:
export const trackList: Track[] = [{
name: "歌曲名称",
artist: "歌手名",
description: "歌曲描述(可选)",
cover: "/cover/your-cover.jpg", // 封面文件名
lyric: "your-lyric.ttml", // 歌词文件名
url: 'your-audio.mp3' // 音频文件名
}];
将文件放入对应目录:
public/cover/ 文件夹public/lyrics/ 文件夹(TTML格式)public/audios/ 文件夹(mp3格式)如果使用外部CDN托管音频,修改 src/App.tsx 第69行:
audio.src = `https://你的CDN域名/${currentTrack.url}`;
歌词文件需要TTML格式。如果只有LRC格式,需要转换:
<tt xmlns="http://www.w3.org/ns/ttml">
<body>
<div>
<p begin="00:05.00" end="00:08.00">第一句歌词</p>
<p begin="00:08.00" end="00:12.00">第二句歌词</p>
</div>
</body>
</tt>
编辑 src/list.ts,清空数组:
export const trackList: Track[] = [];
删除以下文件夹中的所有文件:
public/cover/ - 封面图片public/lyrics/ - 歌词文件public/audios/ - 音频文件(如果使用本地托管)项目使用CloudBase CI/CD自动部署到EdgeOne Pages,配置见 .cnb.yml。
Powered by Ar-Sr-Na