Spotify音频书签：基于cli3/cli的标记工具
项目地址: https://gitcode.com/gh_mirrors/cli3/cli 你是否曾在听歌时遇到精彩片段想稍后重温，却苦于找不到快速定位的方法？是否在浏览歌单时发现心仪专辑，却因没有便捷收藏方式而忘记？cli3/cli的音频书签功能彻底解决了这些问题，让你轻松标记和管理音乐片段与页面。
书签功能核心模块解析
书签功能的核心实现位于Extensions/bookmark.js文件中，该扩展由khanhas开发，版本2.0，支持存储页面、曲目及带时间戳的曲目。
扩展主要通过三个核心功能满足用户需求：
- 页面收藏：保存当前浏览的Spotify页面
- 曲目收藏：标记喜欢的单曲
- 带时间戳的曲目收藏：精确记录音频中的特定时间点，支持后续精准回放
功能实现原理
数据存储机制
书签系统使用LocalStorage存储所有标记数据，通过"bookmark_spicetify"键进行数据持久化：
// 数据存储关键代码
addToStorage(data) {
data.id = `${data.uri}-${new Date().getTime()}`;
const storage = this.getStorage();
storage.unshift(data);
LocalStorage.set(STORAGE_KEY, JSON.stringify(storage));
this.apply();
}
每个书签项包含唯一ID、URI、标题、描述、图片URL等基本信息，对于带时间戳的音频书签，还会额外存储时间点(time)和进度百分比(progress)。
书签卡片组件
书签以卡片形式展示，Extensions/bookmark.js中定义了CardContainer类实现可视化展示：
class CardContainer extends HTMLElement {
constructor(info) {
super();
// 卡片HTML结构生成
this.innerHTML = `
<div class="bookmark-card">
${info.imageUrl ? `<img src="${info.imageUrl}" alt="${info.title}" class="bookmark-card-image">` : ""}
<div class="bookmark-card-info">
<div class="main-type-balladBold"><span>${info.title}</span></div>
<div class="main-type-mesto"><span>${info.description}</span></div>
${info.time ? `
<div class="bookmark-fixed-height">
<div class="bookmark-progress">
<div class="bookmark-progress__bar" style="--progress:${info.progress}"></div>
</div>
<span class="bookmark-progress__time">${Player.formatTime(info.time)}</span>
</div>
` : ""}
</div>
<!-- 播放按钮和删除按钮 -->
</div>
`;
}
}
带时间戳的音频书签会显示进度条和时间点，让用户直观了解标记位置：
实用操作指南
基本使用流程
- 安装扩展：确保已通过install.sh或install.ps1安装cli3/cli工具及相关扩展
- 添加书签：
- 页面书签：点击顶部栏书签按钮，选择"Current page"
- 曲目书签：播放时点击"Track"选项
- 带时间戳书签：选择"Track with timestamp"精确标记音频位置
- 管理书签：通过顶部栏书签按钮打开管理面板，可按"All"、"Page"或"Track"筛选
高级功能：时间戳音频标记
对于播客、有声书或需要精确标记的音乐片段，时间戳功能非常实用：
// 时间戳标记实现代码
function storeTrackWithTime() {
const meta = getTrackMeta();
meta.time = Player.getProgress(); // 获取当前播放进度（毫秒）
meta.progress = Player.getProgressPercent(); // 获取进度百分比
LIST.addToStorage(meta);
}
标记后，在书签列表中会显示进度条和具体时间点，点击播放按钮将从标记位置开始播放：
上下文菜单集成
扩展还在右键菜单中添加了"Bookmark"选项，支持直接对曲目、专辑、艺术家等内容添加书签：
new Spicetify.ContextMenu.Item(
"Bookmark",
async ([uri], [uid] = [], context = undefined) => {
// 根据URI类型获取元数据并添加书签
},
([uri]) => {
// 仅对支持的URI类型显示菜单选项
const type = uri.split(":")[1];
return [
Spicetify.URI.Type.TRACK,
Spicetify.URI.Type.ALBUM,
// 其他支持的类型
].includes(type);
}
).register();
扩展自定义与配置
样式自定义
书签卡片的样式定义在Extensions/bookmark.js的CSS部分，用户可根据需求修改：
.bookmark-card {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-top: 20px;
cursor: pointer;
padding: 0 10px;
}
.bookmark-card-image {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 4px;
}
/* 更多样式定义 */
如需深度定制，可结合项目中的主题系统，修改Themes/SpicetifyDefault/user.css文件。
存储位置与数据迁移
所有书签数据存储在浏览器LocalStorage中，如需备份或迁移，可通过浏览器开发者工具导出：
- 打开Spotify，按F12打开开发者工具
- 切换到"Application"标签
- 在左侧存储部分找到"Local Storage"
- 导出"bookmark_spicetify"键对应的JSON数据
常见问题解决
书签不显示问题
若添加的书签未显示，可能是由于存储数据损坏，可尝试清除存储后重新添加：
// 清除所有书签数据（需在开发者工具控制台执行）
localStorage.removeItem('bookmark_spicetify');
时间戳不准确
如遇到书签时间戳跳转不准确的情况，通常是由于Spotify客户端版本更新导致API变化，建议通过install.sh更新cli3/cli工具至最新版本。
总结与使用建议
cli3/cli的音频书签功能为Spotify用户提供了高效的内容标记解决方案，特别适合以下场景：
- 音乐制作人和DJ标记灵感片段
- 语言学习者标记播客中的重点内容
- 普通用户收藏喜爱的歌曲和专辑页面
建议结合项目中的其他扩展如Extensions/popupLyrics.js（弹窗歌词）使用，提升音乐体验。所有功能的源码均开源在项目中，用户可根据需求自行扩展，具体开发指南可参考README.md。
掌握音频书签功能后，你将不再错过任何精彩的音频瞬间，让音乐管理更高效、更个性化。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
