每首歌独立主题色配置

核心概念

APlayer 支持两级主题色：

1. 全局 theme：所有歌曲的默认主题色
2. 单曲 audio.theme：某首歌的专属主题色，优先级高于全局

当切换歌曲时，APlayer 会检查新歌曲有没有设置 audio.theme，有的话立即切换到那个颜色。没有则保持全局 theme。

代码示例

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    theme: '#b7daff',  // 全局默认淡蓝色
    audio: [
        {
            name: '歌曲一',
            artist: '艺术家A',
            url: '1.mp3',
            cover: '1.jpg',
            theme: '#FF6B6B'  // 这首歌的主题色是珊瑚红
        },
        {
            name: '歌曲二',
            artist: '艺术家B',
            url: '2.mp3',
            cover: '2.jpg'
            // 没有 theme 字段 → 使用全局淡蓝色
        },
        {
            name: '歌曲三',
            artist: '艺术家C',
            url: '3.mp3',
            cover: '3.jpg',
            theme: '#4ECDC4'  // 这首歌的主题色是薄荷青
        }
    ]
});

当用户在这三首歌之间切换时，播放器的进度条、音量条、列表标记等元素会实时切换颜色。

运行时修改某首歌的主题色

// 修改第三首歌的主题色（索引从 0 开始）
ap.theme('#9B59B6', 2);

// 注意：如果当前正在播放第三首，颜色立即生效
// 如果当前播放的是其他歌，等切到第三首时才会生效

清空单曲主题色

如果你想移除某首歌的专属主题色，让它回到全局默认：

// 直接把该歌曲的 theme 字段清空
ap.list.audios[1].theme = '';

// 然后手动刷新（如果当前正在播放这首）
ap.theme(ap.options.theme, ap.list.index);

与封面自动提取的配合

audio.theme 和封面自动提取功能可以组合使用。逻辑是：

• 如果歌曲有 audio.theme 字段 → 优先使用它（手动指定的颜色）
• 如果歌曲没有 audio.theme 字段 → 可以由封面自动提取功能来填充

// 初始化时三首歌都有手动 theme
const ap = new APlayer({
    theme: '#b7daff',
    audio: [
        { name: 'A', cover: 'a.jpg', theme: '#FF0000' },  // 手动红色
        { name: 'B', cover: 'b.jpg' },                     // 空 → 自动提取
        { name: 'C', cover: 'c.jpg', theme: '#00FF00' }   // 手动绿色
    ]
});

// 封面自动提取代码中
function setTheme(index) {
    // 有手动设置就跳过
    if (ap.list.audios[index].theme) return;
    // 否则提取封面主色
    // ... color-thief 逻辑 ...
}

实际效果举例

假设你有一张歌单：

• 《晴天》封面是蓝天白云 → 主题色用淡蓝
• 《夜曲》封面是黑色剪影 → 主题色用深灰
• 《告白气球》封面是粉色气球 → 主题色用粉色
• 《稻香》封面是金色稻田 → 主题色用金黄

用户每切换一首歌，播放器的配色都会优雅地过渡到对应的主色调。这种体验远胜过所有歌曲都用同一个主题色。