音乐页面搭建指南

1
meting: {
2
    server: "netease",  // netease=网易云, tencent=QQ, kugou=酷狗
3
}

1
meting: {
2
    type: "playlist",  // song=单曲, playlist=歌单, album=专辑, artist=艺术家
3
}

1
meting: {
2
    server: "netease",
3
    type: "playlist",
4
    id: "10046455237",
5
}

1
meting: {
2
    api: "https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r",
3
    fallbackApis: [
4
        "https://api.injahow.cn/meting/?server=:server&type=:type&id=:id",
5
        "https://api.moeyao.cn/meting/?server=:server&type=:type&id=:id",
6
    ],
7
}

1
public/
2
└── assets/
3
    └── music/
4
        ├── 歌曲1.mp3
5
        ├── 歌曲2.mp3
6
        ├── cover/
7
        │   ├── 封面1.webp
8
        │   └── 封面2.webp
9
        └── lrc/
10
            ├── 歌曲1.lrc
11
            └── 歌曲2.lrc

1
playlist: [
2
    // ... 已有歌曲
3
    {
4
        name: "新歌曲名",
5
        artist: "新歌手名",
6
        url: "/assets/music/新歌曲.mp3",
7
        cover: "/assets/music/cover/新封面.webp",
8
        lrc: "/assets/music/lrc/新歌词.lrc",
9
    },
10
],

1
{
2
    name: "歌曲名",
3
    artist: "歌手名",
4
    url: "/assets/music/歌曲.mp3",
5
    cover: "/assets/music/cover/新封面.webp",  // 修改这里
6
}

1
[00:00.00]歌曲标题
2
[00:01.00]歌手名
3
[00:05.00]第一句歌词
4
[00:10.50]第二句歌词
5
[00:15.20]第三句歌词

1
[00:00.00]歌曲标题
2
[00:01.00]歌手名
3
[00:05.00]第一句歌词
4
[00:10.50]第二句歌词

1
{
2
    name: "歌曲名",
3
    artist: "歌手名",
4
    url: "/assets/music/歌曲.mp3",
5
    lrc: "/assets/music/lrc/歌曲.lrc",  // LRC 文件路径
6
}

1
{
2
    name: "歌曲名",
3
    artist: "歌手名",
4
    url: "/assets/music/歌曲.mp3",
5
    lrc: "[00:05.00]第一句歌词\n[00:10.50]第二句歌词",
6
}

1
<div class="lyrics-panel border-l-4 border-l-(--primary)">
2
    <div class="lyrics-header">歌词</div>
3
    <div class="lyrics-container h-64 overflow-y-auto">
4
        <!-- 歌词行 -->
5
    </div>
6
</div>

1
.lyrics-container {
2
    height: 16rem;  /* 默认 h-64，可改为 h-48 或 h-80 */
3
}

1
// 滚动检测核心逻辑
2
var scrollDeltaAccum = 0;
3
ui.lyricsContainer.addEventListener('wheel', function(e) {
4
    scrollDeltaAccum += Math.abs(e.deltaY);
5
    if (scrollDeltaAccum > 50) {
6
        isUserScrolling = true;  // 暂停自动滚动
7
        resetScrollTimeout();    // 2秒后恢复
8
    }
9
    // 300ms 内无新滚动则重置累积值
10
    clearTimeout(resetTimer);
11
    resetTimer = setTimeout(function() { scrollDeltaAccum = 0; }, 300);
12
});

1
// localStorage key: "music-favorites"
2
// value: JSON 数组
3
[
4
    { name: "知我", artist: "国风堂", pic: "https://..." },
5
    { name: "女孩", artist: "韦礼安", pic: "https://..." },
6
]

1
var FAVORITES_KEY = 'music-favorites';  // 改为你想要的 key

1
localStorage.removeItem('music-favorites');

1
---
2
import MainGridLayout from "@/layouts/MainGridLayout.astro";
3
import MusicPage from "@/components/pages/MusicPage.astro";
4
---
5

6
<MainGridLayout title="音乐" description="我喜欢的音乐">
7
    <div class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-32">
8
        <div class="card-base z-10 px-6 md:px-9 py-6 relative w-full">
9
            <MusicPage />
10
        </div>
11
    </div>
12
</MainGridLayout>

1
:root {
2
    --primary: oklch(0.65 0.15 250);  /* 蓝色 */
3
}

1
@keyframes vinyl-spin {
2
    from { transform: rotate(0deg); }
3
    to { transform: rotate(360deg); }
4
}
5

6
.vinyl-ring {
7
    animation: vinyl-spin 20s linear infinite;  /* 改这里的 20s */
8
}

1
<div class="song-grid grid grid-cols-3 gap-3">

1
export const musicPlayerConfig: MusicPlayerConfig = {
2
    showInNavbar: false,  // 禁用导航栏入口
3
};