一、项目介绍
核心功能
- 句子级点读:点击任意句子开始播放,自动高亮跟随
- 多语言视图:EN / EN+CN / CN 三种显示模式
- 播放控制:倍速调节、连读/点读切换、循环模式、断点续播
- 全局快捷键:空格播放/暂停、方向键导航、音量控制
- 学习管理:课程收藏、学习记录、进度追踪
- 现代界面:Apple 风格、深浅色主题、响应式设计
- 零依赖:纯静态文件,解压即用
二、搭建教程
1、使用电脑打开浏览器下载项目;
下载地址:https://gitcode.com/gh_mirrors/nc/echo-flow

2、打开绿联NAS-文件管理器-找到docker文件夹,创建文件夹nceflow;

3、把下载的项目上传到docker文件下的nceflow文件夹,并解压;


4、把解压的文件全部放到nceflow文件下(记得检查下有没有static文件夹,不然构建的时候会报错);

5、打开docker -项目-创建nceflow项目;

6、粘贴docker compose;
# =============================================================================
# NCE-Flow 部署配置(本地构建版)
# -----------------------------------------------------------------------------
# 项目地址:https://github.com/luzhenhua/NCE-Flow
# 说明:Docker Hub 上没有该项目的公开镜像,必须 clone 源码后本地构建。
# 访问地址:http://localhost:11223
#
# 常用命令:
# docker compose build # 单独构建镜像(方便看构建报错)
# docker compose up -d # 构建(如需要)并后台启动
# docker compose up -d --build # 强制重新构建后启动(改代码后用)
# docker compose ps # 查看状态,重点关注是否 healthy
# docker compose logs -f # 实时查看日志
# docker compose down # 停止并删除容器(./data 数据保留)
#
# 注意:Compose V2 已废弃 version 字段,这里不写,写了会提示 obsolete。
# =============================================================================
services:
# ---------------------------------------------------------------------------
# 服务名,compose 内部用它互相引用(本项目单服务,叫什么都能跑)
# 与 container_name 是两回事:这是逻辑名,下面是容器实际名字
# ---------------------------------------------------------------------------
nce-flow:
# -------------------------------------------------------------------------
# 构建配置:用当前目录(仓库根目录)的 Dockerfile 本地构建镜像
# - context: . 表示构建上下文是当前目录
# - dockerfile 省略 默认就是 ./Dockerfile;若 Dockerfile 在子目录,改为:
# build:
# context: .
# dockerfile: docker/Dockerfile
# -------------------------------------------------------------------------
build: .
# -------------------------------------------------------------------------
# 给构建产物起个名字。
# 不加这一行,构建出的镜像会显示为 <none>:<none>,后续 docker images
# 里难以识别、也不方便单独删除。名字可自定义,仅本地使用不推送到仓库。
# -------------------------------------------------------------------------
image: nce-flow:local
# -------------------------------------------------------------------------
# 容器名,对应 docker run --name nce-flow
# 加了它之后容器名固定,方便 docker exec / docker logs 直接用名字;
# 代价是同一台机器上不能并行跑两份该 compose(会重名冲突)。
# 如果将来要做蓝绿/多实例部署,删掉这一行让 compose 自动生成名字。
# -------------------------------------------------------------------------
container_name: nce-flow
# -------------------------------------------------------------------------
# 端口映射:宿主机 11223 -> 容器 80(nginx 默认端口)
# 格式是 "宿主机端口:容器端口"。容器内 nginx 监听 80,这部分不要改;
# 只改了冒号左边,对外访问变为 http://localhost:11223
# 如果 11223 也被占用,只改左边即可,例如 "12345:80"
# -------------------------------------------------------------------------
ports:
- "11223:80"
# -------------------------------------------------------------------------
# 重启策略:
# no 从不自动重启(默认)
# always 除非手动 stop,否则总是重启(含宿主机重启后)
# unless-stopped 同 always,但手动 stop 后不会自动拉起 ← 当前选择
# on-failure 非 0 退出码才重启
# unless-stopped 是最常用的折中:宿主机重启、容器崩溃都会自动恢复,
# 但你主动 docker compose stop 后它保持停止状态。
# -------------------------------------------------------------------------
restart: unless-stopped
# -------------------------------------------------------------------------
# 数据卷挂载:宿主机目录 -> 容器内目录
# -------------------------------------------------------------------------
volumes:
# 【核心】服务端数据持久化与多设备同步
# 挂载后用户数据自动落到宿主机 ./data 目录(相对于 compose 文件所在目录),
# 即使删除容器、清浏览器缓存、重新构建镜像,数据都不会丢失。
# 备份/迁移时只需把 ./data 整个目录拷走。
# 注意:首次启动会自动创建该目录,权限由容器内进程决定;
# 若出现写入失败,检查宿主机目录属主(必要时 chown 101:101)。
- ./data:/app/data
# 【可选】运行时热更新静态页面内容(改宿主机文件即时生效,无需重建镜像)
# 需要改哪块就取消对应那行的注释;目录不存在时 compose 会自动创建空目录,
# 若容器内原本有内容会被空目录覆盖,请先把内容拷到宿主机对应目录。
# - ./NCE1:/usr/share/nginx/html/NCE1
# - ./NCE2:/usr/share/nginx/html/NCE2
# - ./NCE3:/usr/share/nginx/html/NCE3
# - ./NCE4:/usr/share/nginx/html/NCE4
# -------------------------------------------------------------------------
# 环境变量(可选)
# -------------------------------------------------------------------------
# environment:
# 设置访问令牌后,需在应用「设置」页填入同一令牌才能同步数据。
# 这是简易鉴权,不是强安全方案;公网暴露时建议再加反向代理 + HTTPS。
# - NCE_DATA_TOKEN=change-me
# 时区(如需日志/时间显示为北京时间可打开)
# - TZ=Asia/Shanghai
# -------------------------------------------------------------------------
# 健康检查:定期探测容器内服务是否真的可用
# 注意:这里探测的是「容器内」地址,端口固定是 80,
# 与宿主机映射的 11223 无关,改端口时不需要动这里。
# -------------------------------------------------------------------------
healthcheck:
# 探测方式说明:
# - 若基础镜像是 nginx:alpine,busybox 自带 wget,用下面这行即可
# - 若是 nginx:latest 等 Debian 基础镜像,默认没有 wget/curl,
# 用 wget 会一直 unhealthy,此时改用:
# test: ["CMD-SHELL", "bash -c '</dev/tcp/127.0.0.1/80' || exit 1"]
# 或者更轻量:test: ["CMD", "nginx", "-t"]
# 先确认基础镜像:grep '^FROM' Dockerfile
test: ["CMD-SHELL", "wget -q --spider http://localhost/ || exit 1"]
# 检查间隔:每 30 秒探测一次
interval: 30s
# 单次探测超时:超过 10 秒视为本次失败
timeout: 10s
# 连续失败 3 次才判定为 unhealthy(避免偶发抖动误报)
retries: 3
# 启动宽限期:容器启动后 40 秒内不判定失败,
# 给 nginx 初始化和首次构建的静态资源准备留出时间
start_period: 40s
# -------------------------------------------------------------------------
# 【可选】日志轮转
# Docker 默认日志无限增长,长期运行可能把磁盘写满,建议打开下面配置:
# -------------------------------------------------------------------------
# logging:
# driver: json-file
# options:
# max-size: "10m" # 单个日志文件最大 10MB
# max-file: "3" # 最多保留 3 个文件,超出自动删除旧的
# -------------------------------------------------------------------------
# 【可选】资源限制(Compose V2 单机可用 deploy.resources 或 mem_limit)
# 个人小站一般不需要,共享主机或 VPS 内存紧张时可加上:
# -------------------------------------------------------------------------
# deploy:
# resources:
# limits:
# cpus: "1.0"
# memory: 512M
# =============================================================================
# 关于 networks:
# 本项目只有一个服务,使用 compose 默认创建的 bridge 网络即可,
# 无需显式声明自定义网络。将来若增加反向代理(如 caddy / nginx-proxy)
# 等第二个服务需要互通时,再加:
#
# networks:
# nce-network:
# driver: bridge
#
# 并在服务下加 networks: [nce-network],两边都声明才能互相解析。
# =============================================================================

7、点击立即部署,等待跑码;

8、等待完成后,点击完成;

9、启动服务后,直接在浏览器访问 http://NAS_IP:11223 ;比如我的是http://192.168.1.200:11223;


三、参考文档
1、gitcode:https://gitcode.com/gh_mirrors/nc/echo-flow;
2、在线体验: https://nceflow.zhenhua.lu。
四、免责声明
重要声明:本项目的内容仅限个人学习、研究或欣赏之用,完全没有丝毫商业用途。
- 本项目仅作为辅助正版新概念英语教材的学习工具
- 音频与文本内容的版权归原著作权人所有
- 严禁用于任何商业目的或未经授权的传播
- 使用本项目即表示您同意上述条款
支持正版
本人在学习过程中使用的是正版新概念英语教材。为了帮助同样热爱新概念英语的广大英语学习者受益,特开发此辅助学习工具。
为保护著作权人的权益,请在使用本站前购买正版教材:
- 购买合法授权的新概念英语正版教材
- 使用官方授权的学习资源和平台
- 支持原创作者和教育出版社
- 本项目仅作为正版教材的补充学习工具
© 版权声明
尊重原创 · 保护知识产权
原创保护:本站所有原创内容均受著作权法保护,未经许可禁止转载或商业使用。
转载规范:如需转载,请注明出处并保留原文链接,不得删改内容。
免责声明:本站仅提供学习交流平台,内容观点不代表本站立场。
侵权处理:如发现侵权内容,请及时联系我们(jimhuhu1125@126.com),将在第一时间处理。
THE END








