APlayer 迷你模式紧凑布局

什么是迷你模式

迷你模式（mini mode）是 APlayer 最紧凑的显示形态。它不展示专辑封面、不展示歌词、不展示播放列表，只保留一行精简的控件：歌曲名、播放 / 暂停、上一首 / 下一首、音量、播放进度。

启用迷你模式

设置 mini: true：

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    mini: true,
    audio: [{
        name: '歌曲名称',
        artist: '艺术家',
        url: 'audio.mp3',
        cover: 'cover.jpg'
    }]
});

迷你模式的视觉组成

迷你模式只保留以下元素：

• 左侧：小型播放 / 暂停按钮
• 中间：歌曲名称 + 艺术家（单行截断）
• 右侧：上一首、下一首、音量

不会出现的元素：封面图、歌词、播放列表、循环模式切换、播放顺序切换、进度条

适用场景

迷你模式适合以下位置：

• 博客侧边栏：放一首 "正在播放"，不占太多垂直空间
• 文章内嵌：在某篇关于音乐的文章中插入紧凑播放器
• 个人主页：在个人简介旁放一个迷你播放器
• 导航栏集成：与顶部导航栏合并，作为小型挂件

与吸底模式的互斥

mini 和 fixed 不能同时设置。如果你想要"精简 + 固定底部"的效果，选择 fixed: true，然后通过自定义 CSS 来隐藏封面和列表区域——不要同时打开两个开关。

迷你模式 + 多个音频

即使你传入了多个音频，迷你模式也不会展示播放列表。歌曲仍然可以通过上一首 / 下一首按钮或者 API 来切换，但列表不可见。

如果需要列表可见但空间紧张，考虑使用正常模式 + listFolded: true（列表默认折叠）或 listMaxHeight 限制列表高度。

代码示例

<link rel="stylesheet" href="APlayer.min.css">
<div id="mini-player"></div>
<script src="APlayer.min.js"></script>
<script>
const ap = new APlayer({
    container: document.getElementById('mini-player'),
    mini: true,
    theme: '#333',
    volume: 0.8,
    audio: [
        { name: '歌曲一', artist: '艺术家A', url: '1.mp3', cover: '1.jpg' },
        { name: '歌曲二', artist: '艺术家B', url: '2.mp3', cover: '2.jpg' },
        { name: '歌曲三', artist: '艺术家C', url: '3.mp3', cover: '3.jpg' }
    ]
});
</script>

这段代码会渲染出一个大约 50px 高度的紧凑播放器，三首歌可以通过按钮切换，但界面上看不到列表。