Ubuntu
102 lines
2.5 KiB
Markdown
102 lines
2.5 KiB
Markdown
# 📚 Audiobook Player
|
||
|
||
极简沉浸式的英文有声书 Web 应用。
|
||
|
||
## ✨ Features
|
||
|
||
- 🎨 **极简设计** - 米白底色，纸质书阅读体验
|
||
- 🌙 **夜间模式** - 一键切换深色主题
|
||
- 📱 **移动优先** - 完美适配手机，支持 App 内嵌浏览器
|
||
- 🔊 **流式朗读** - 实时 TTS，无需等待完整转换
|
||
- 🔄 **断点续读** - 自动保存阅读进度
|
||
- ⚡ **懒加载** - 长文章分段加载，流畅滑动
|
||
- 👆 **手势支持** - 滑动返回，双击缩放
|
||
|
||
## 🏗️ 架构
|
||
|
||
```
|
||
Flask Backend Frontend
|
||
├── / (index) ────────▶ 首页（来源选择）
|
||
├── /list/<source> ────────▶ 故事列表
|
||
├── /play/<path> ────────▶ 播放页面
|
||
│ ├─ 顶部固定播放器
|
||
│ └─ 下方内容区
|
||
└── /api/stream ────────▶ TTS 音频流
|
||
```
|
||
|
||
## 🚀 快速开始
|
||
|
||
```bash
|
||
cd ~/nanocode/audiobook-player
|
||
|
||
# 安装依赖
|
||
pip3 install -r requirements.txt
|
||
|
||
# 启动服务器
|
||
./start.sh start-bg
|
||
|
||
# 查看状态
|
||
./start.sh status
|
||
```
|
||
|
||
访问：http://localhost:5000
|
||
|
||
## 📁 目录结构
|
||
|
||
```
|
||
/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
|
||
|
||
## 🔧 开发计划
|
||
|
||
- [x] 基础 Flask 框架
|
||
- [x] 三页面模板
|
||
- [x] 流式 TTS 播放
|
||
- [x] 主题切换
|
||
- [ ] 阅读进度同步
|
||
- [ ] 播放速度调节
|
||
- [ ] 收藏功能
|
||
|
||
## 📱 App 集成
|
||
|
||
适合嵌入手机 App 的 WebView：
|
||
|
||
```swift
|
||
// iOS WKWebView
|
||
let webView = WKWebView()
|
||
webView.load(URLRequest(url: URL(string: "http://129.211.173.87:5000")!))
|
||
```
|
||
|
||
```kotlin
|
||
// Android WebView
|
||
webView.loadUrl("http://129.211.173.87:5000")
|
||
```
|
||
|
||
特点：
|
||
- 每页独立返回按钮，不依赖浏览器导航
|
||
- 无地址栏干扰
|
||
- 响应式布局
|