Web 端播放器操作指南:播放控制、列表、切换进度全解析
播放器位置
Web PWA 的播放器通常常驻在页面底部,不管你在浏览列表、搜索结果还是作品详情页,播放器都在那里不消失。
播放器界面区块
┌──────────┬──────────────────────────────────┬──────────────┐
│ [封面缩略]│ 标题(当前文件) │ 倍速/定时 │
│ │ 作者 / 作品番号 │ │
├──────────┤──────────────────────────────────┼──────────────┤
│ 上一首 │ ◀──[进度条]──▶ │ 播放/暂停 │
│ │ 当前时间 / 总时长 │ 下一首 │
└──────────┴──────────────────────────────────┴──────────────┘
基础操作
| 操作 | 怎么点 |
|---|---|
| 播放/暂停 | 中间的大按钮,或按空格键 |
| 拖动进度 | 鼠标点住进度条拖 |
| 上一首 | 左边按钮,或按方向键上 |
| 下一首 | 右边按钮,或按方向键下 |
| 前进 10 秒 | 有的版本有按钮,或按右键 |
| 后退 10 秒 | 有的版本有按钮,或按左键 |
| 全屏播放器 | 点封面缩略图 |
播放列表
- 点击作品详情页的"播放"按钮,默认把该作品的所有音频文件加入播放列表
- 连续点多个作品,可以构建一个混合播放列表
- 部分版本支持拖拽排序
- 支持清空列表、循环播放(单曲/全部)、随机播放
流式播放原理
Kikoeru 后端(kikoeru-express)直接把本地文件以 HTTP 流的方式推给前端播放器——浏览器不下载文件,实时边下边播。
优势:
- 不用等下载完才能听,点开就播
- 手机端也不会占存储空间
- 断点续播支持好(进度直接保存)
网络条件差时可能卡顿,播放器会自动缓冲。