APlayer 正常模式完整展示与配置

什么是正常模式

正常模式是 APlayer 的默认形态。当你不设置 fixed 和 mini 参数时，播放器就以正常模式渲染出来。它会完整展示：

专辑封面（圆形旋转动画）
歌曲名称和艺术家
实时滚动歌词区域（如果配置了歌词）
播放进度条、音量条、播放 / 暂停、上一首 / 下一首、列表折叠按钮
完整的播放列表（可折叠）

正常模式适合放在页面内容区域，比如博客侧边栏、文章页底部、独立音乐展示页等位置。

最小化初始化

正常模式下，你只需要一个容器元素和至少一条音频数据：

<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: '歌曲名称',
        artist: '艺术家',
        url: 'audio.mp3',
        cover: 'cover.jpg'
    }]
});
</script>

这是最简化的正常模式配置。name 和 artist 用于显示在界面上，url 是音频文件地址，cover 是专辑封面。

单音频 vs 多音频

audio 参数可以是一个对象，也可以是一个对象数组：

// 单个音频
audio: { name: 'name', artist: 'artist', url: 'audio.mp3', cover: 'cover.jpg' }

// 多个音频（会自动生成播放列表）
audio: [
    { name: '第一首', artist: '艺术家', url: '1.mp3', cover: '1.jpg' },
    { name: '第二首', artist: '艺术家', url: '2.mp3', cover: '2.jpg' }
]

传入多个音频后，播放列表会自动出现——这是正常模式和迷你模式的区别之一：迷你模式下不会展示列表。

正常模式常用参数

除了 audio 之外，以下参数在正常模式下最常配置：

参数	默认值	用途
`theme`	`'#b7daff'`	全局主题色，控制进度条、音量条、列表标记
`loop`	`'all'`	循环模式：`all`（全部循环）、`one`（单曲循环）、`none`（不循环）
`order`	`'list'`	播放顺序：`list`（按列表顺序）、`random`（随机）
`preload`	`'auto'`	预加载策略：`none`（不预加载）、`metadata`（只加载元数据）、`auto`（预加载全部）
`volume`	`0.7`	初始音量，范围 0 ~ 1，用户手动调节后播放器会记住设置
`mutex`	`true`	互斥模式——页面上多个播放器时，只允许一个在播放
`lrcType`	`0`	歌词显示方式，详见 LRC 三种方式
`listFolded`	`false`	列表是否默认折叠
`listMaxHeight`	无限制	列表区域最大高度，超出则滚动

正常模式的视觉组成

从界面上看，正常模式分为四个区域：

封面区（左侧）：圆形专辑封面 + 旋转动画，播放时才旋转
信息与歌词区（右侧上部）：歌曲名 + 艺术家 + 实时滚动歌词
控件区（右侧中部）：播放 / 暂停、上一首 / 下一首、进度条、音量、循环模式、播放顺序
播放列表区（底部）：多音频时自动出现，可折叠

与其他模式的切换

你可以在初始化时通过参数选择模式，也可以在运行时用 API 切换：

// 运行时切换模式
ap.setMode('mini');   // 切到迷你模式
ap.setMode('normal'); // 切回正常模式

注意：mini 和 fixed 参数互斥——同时设置会导致不可预期的行为。