📚 Audiobook Player
极简沉浸式的英文有声书 Web 应用。
✨ Features
- 🎨 极简设计 - 米白底色,纸质书阅读体验
- 🌙 夜间模式 - 一键切换深色主题
- 📱 移动优先 - 完美适配手机,支持 App 内嵌浏览器
- 🔊 流式朗读 - 实时 TTS,无需等待完整转换
- 🔄 断点续读 - 自动保存阅读进度
- ⚡ 懒加载 - 长文章分段加载,流畅滑动
- 👆 手势支持 - 滑动返回,双击缩放
🏗️ 架构
Flask Backend Frontend
├── / (index) ────────▶ 首页(来源选择)
├── /list/<source> ────────▶ 故事列表
├── /play/<path> ────────▶ 播放页面
│ ├─ 顶部固定播放器
│ └─ 下方内容区
└── /api/stream ────────▶ TTS 音频流
🚀 快速开始
cd ~/nanocode/audiobook-player
# 安装依赖
pip3 install -r requirements.txt
# 启动服务器
./start.sh start-bg
# 查看状态
./start.sh status
📁 目录结构
/home/ubuntu/media/
├── libraryofshortstories/
│ ├── the-1000000-bank-note/
│ │ ├── content.txt
│ │ └── metadata.md
│ └── ...
└── public-domain-poetry/
└── ...
🎮 页面导航
| 页面 | 路径 | 功能 |
|---|---|---|
| 首页 | / |
显示所有来源(libraryofshortstories, poetry等) |
| 列表 | /list/<source> |
该来源下的故事列表 |
| 播放 | /play/<source>/<story> |
播放器 + 文章内容 |
🎨 设计规范
- 配色:米白
#F5F1E8/ 深黑#1A1A1A - 字体:Georgia 衬线体
- 播放器:固定 100px,磨砂玻璃效果
- 卡片:圆角 16px,阴影
- 触摸区:≥ 80px
🔧 开发计划
- 基础 Flask 框架
- 三页面模板
- 流式 TTS 播放
- 主题切换
- 阅读进度同步
- 播放速度调节
- 收藏功能
📱 App 集成
适合嵌入手机 App 的 WebView:
// iOS WKWebView
let webView = WKWebView()
webView.load(URLRequest(url: URL(string: "http://129.211.173.87:5000")!))
// Android WebView
webView.loadUrl("http://129.211.173.87:5000")
特点:
- 每页独立返回按钮,不依赖浏览器导航
- 无地址栏干扰
- 响应式布局