-
0.0 s
🎵 纯音乐
本项目说明：music-player.js 是主模块，提供播放器核心功能；media-session.js 为可选扩展模块，用于注册系统媒体会话（Media Session API），非必须使用。下面的示例使用占位地址引入模块，替换为你上传后的实际 URL 即可。
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
name | string | ❌ | 歌曲名称 |
singer | string | ❌ | 歌手 |
album | string | ❌ | 专辑 |
cover | string | ❌ | 封面图片路径 |
url | string | ✅ | 音频文件路径（放音乐没有url那怎行？） |
lyrics | string | ❌ | LRC歌词文件路径、内联歌词字符串，或空字符串表示纯音乐 |
// 1. LRC 文件路径（模块自动 fetch）
lyrics: './music/song.lrc'
// 2. 内联 LRC 字符串
lyrics: `[00:01.00]第一句
[00:05.00]第二句`
// 3. 纯音乐（留空）
lyrics: ''步骤概览：引入主模块 → 创建播放列表 → 实例化 MusicPlayer → 将歌词视图插入页面 → 可选注册 Media Session。
在实际部署时将下列占位 URL 替换为你上传后的地址：
<script src="https://a2942.top/more/mini-music-player-module/music-player.js"></script>
<!-- 可选：Media Session 扩展 -->
<script src="https://a2942.top/more/mini-music-player-module/media-session.js"></script>播放列表是一个普通的 JavaScript 数组，元素按顺序播放：
const playlist = [
{
name: '天真的橡皮',
singer: '白水寒',
album: 'DJ林泽',
cover: './music/cover.jpg',
url: './music/song.mp3',
lyrics: './music/song.lrc' // 或内联 LRC 字符串，或 '' 表示纯音乐
}
];基本用法：构造并把滚动歌词视图插入到页面容器中。
// 创建播放器
const player = new MusicPlayer({ playlist });
// 将歌词滚动视图插入到页面（页面需有一个容器，例如：<div id="lyricContainer"></div>）
document.getElementById('lyricContainer').appendChild(player.getLyricDiv());
// 事件：自动更新 UI（示例）
player.audio.addEventListener('play', updateUI);
player.audio.addEventListener('pause', updateUI);
player.audio.addEventListener('timeupdate', updateUI);如果你引入了 media-session.js，使用它可以让系统媒体控件显示当前曲目信息。该模块是可选的，调用后会返回一个清理函数以便在销毁播放器时解除注册：
// 注册并保留 cleanup 函数
const cleanup = setupMediaSession(player);
// 当不再需要 media session 时调用
// cleanup();player.play(index) 会尝试加载并播放音频，若出错请检查 url 是否可访问。player.setPlaylist(newList) 或自定义逻辑。player.getCurrentLyric() 返回 { index, time, text } 或 null。player.getLyricDiv() 返回可插入的滚动歌词元素。player.play(index?), player.pause(), player.next(), player.prev()。| 方法 | 说明 |
|---|---|
play(index?) | 播放指定索引歌曲 |
pause() | 暂停 |
togglePlay() | 切换播放/暂停 |
next() / prev() | 上一首/下一首 |
getCurrentSongInfo() | 获取当前歌曲对象 |
getCurrentTime() | 获取播放进度（秒） |
getCurrentLyric() | 获取当前歌词行 { text } 或 null |
getLyricDiv() | 获取滚动歌词DOM元素（插入页面任意位置） |
updatePlaylist(arr) | 替换整个播放列表 |
更新当前歌词行时，建议只在内容变化时操作 DOM：
function updateLyricLine() {
const lyric = player.getCurrentLyric();
const newText = lyric ? lyric.text : '🎵 纯音乐';
if (currentLyricEl.textContent !== newText) {
currentLyricEl.textContent = newText;
}
}// 获取歌词滚动视图并插入容器
const lyricDiv = player.getLyricDiv();
document.getElementById('lyricContainer').appendChild(lyricDiv);模块会自动根据播放进度高亮当前行并滚动。
LRC 是一种常见的歌词时间轴格式，基本形式为每一行以时间标签开始，后面跟随对应歌词文本。
[mm:ss.xx]（分钟:秒.百分之一秒），播放器根据时间匹配并高亮当前行。[00:10.00][00:20.00]重复文本。[ti:标题], [ar:艺术家] 等形式存在于文件顶部。[ti:天真的橡皮]
[ar:白水寒]
[00:05.00]这是第一句歌词
[00:12.30]这是第二句歌词本播放器会自动 fetch LRC 文件，解析时间标签并在播放进度匹配时高亮对应行。若歌词为空则显示“纯音乐”。
说明：media-session.js 是可选扩展，用于将播放信息暴露给系统媒体控件（锁屏、媒体键等）。你可以按需引入并注册；若不需要可忽略此文件。
<!-- 主模块（必须） -->
<script src="https://a2942.top/more/mini-music-player-module/music-player.js"></script>
<!-- 扩展（可选） -->
<script src="https://a2942.top/more/mini-music-player-module/media-session.js"></script>调用 setupMediaSession(player) 会注册 action handlers 并返回一个清理函数，建议在更换或销毁播放器实例时调用清理函数：
// 注册 media session
const cleanupMedia = setupMediaSession(player);
// 在页面或播放器销毁时调用
// cleanupMedia();注意：Media Session 在非 HTTPS 或兼容性较差的浏览器中可能部分功能受限。
播放器通过底层 audio 元素触发事件，推荐订阅以下事件以实现完整体验：
player.audio.addEventListener('error', (e) => {
console.error('音频错误', e);
// 可显示提示并尝试切换到下一首
});[mm:ss.xx]）。