概要

NCE-Flow は「新概念英语（NCE）」の学習用に作られた軽量なオンライン点読プレイヤーです。ページ上の任意の文をタップすると、選択した文から自動的に連続再生を始め、再生に合わせて該当の文をハイライトして中央へスクロールします。表示モードは英語のみ（EN）、英語＋中文（EN+CN）、中文のみ（CN）の三種類を切り替えられ、選択はローカルに保存されます。UIは Apple ライクなモダンデザインでライト／ダークに自動適応。LRC形式の歌詞風ファイルに対応し、英文と中文の同行表記や上下行型の両方を読み取れます。純粋な静的ファイル群（HTML/CSS/JS）で構成されており、外部ライブラリに依存しないためそのまま GitHub Pages に置けるのが特徴です。

リポジトリの統計情報

スター数: 38
フォーク数: 24
ウォッチャー数: 38
コミット数: 5
ファイル数: 16
メインの言語: JavaScript

主な特徴

句子単位の点読：クリック／タップでその文から連続再生、ハイライトと自動スクロール
3つの表示モード：EN / EN+CN / CN を切替、表示設定は永続化
LRC互換：英文|中文同行フォーマットやタイムスタンプ上下行フォーマットに対応
ゼロ依存の静的実装：HTML/CSS/JSのみで構築、GitHub Pages で即公開可能

技術的なポイント

NCE-Flow の技術的核は「シンプルさ」と「同期精度」にあります。フロントエンドは外部ライブラリに依存せず、ネイティブな DOM 操作とブラウザ組み込みのオーディオ API（HTMLAudioElement の timeupdate イベントなど）を用いて再生位置と LRC のタイムスタンプを突き合わせ、該当文のハイライトとスクロール同期を実現しています。LRC のパースは柔軟で、1) 英文と中文が同一行で区切り記号（例: 英文|中文）になっているケース、2) 同一タイムスタンプで上下2行に分かれているケース両方を想定したロジックを備え、タイムタグから文単位の再生制御が可能です。

UI は軽量な CSS（styles.css）による Apple ライクな外観を採用し、 prefers-color-scheme によるライト／ダーク自動切替や滑らかなトランジションを設定しています。ユーザー操作の永続化には localStorage を利用し、表示モードや再生設定をブラウザに記憶させるため、次回アクセス時も同じ状態で開始できます。

また、教材の作成・翻訳支援として translate_lrc.py が同梱されています。これは英語のみの LRC をバッチで二言語化するためのスクリプトで、外部翻訳APIやライブラリを組み合わせることで LRC の各文に対して中文訳を付与し、双語フォーマットで保存できるよう設計されています。結果として、教材準備担当者は手作業を減らして短時間で多量のレッスンを整備可能です。

デプロイ面では、すべて静的ファイルで構成されているため、GitHub Pages や任意の静的ホスティングにそのまま置くだけで公開できます。軽量設計はモバイルブラウザ上での操作性向上にも寄与しており、低帯域の環境でも比較的スムーズに再生と同期表示が行えます。

プロジェクトの構成

主要なファイルとディレクトリ：

.gitattributes: file
.gitignore: file
CNAME: file
LICENSE: file
NCE1: dir
assets/: dir（styles.css, app.js, lesson.js などのスタイル・スクリプト）
index.html: file（書目・コース一覧のトップページ）
lesson.html: file（個別の課文点読ページ）
static/data.json: file（書目やレッスンのメタデータ）
translate_lrc.py: file（LRC 一括翻訳用スクリプト）
README.md: file（プロジェクト概要と使用方法）
その他リソースファイル（音声ファイル参照やLRCデータなど）

各ファイルの役割（簡単な説明）：

assets/styles.css：テーマ、レイアウト、ダークモード対応、アニメーション等を定義。
assets/app.js：グローバルな UI 制御（モード切替、設定の永続化、ページ間の共通処理）。
assets/lesson.js：LRC の読み込み・パース、オーディオ同期、クリックによる再生開始とハイライト制御を実装。
static/data.json：コース一覧や音声/LRC のパスをまとめ、index.html で読み込んで一覧表示するためのデータソース。
translate_lrc.py：英語 LRC を読み込んで翻訳し、双語フォーマットで保存するためのバッチツール（API キーや翻訳エンジンの設定を行うことで運用）。

まとめ

静的で手軽に公開できる、教材配布に適したシンプルな点読プレイヤーです（約50字）。

リポジトリ情報：

名前: NCE-Flow
説明: 新概念英语在线点读，点句即读、连续播放，支持 EN / EN+CN / CN。
スター数: 38
言語: JavaScript
URL: https://github.com/luzhenhua/NCE-Flow
オーナー: luzhenhua
アバター: https://avatars.githubusercontent.com/u/128296338?v=4

READMEの抜粋：

NCE Flow

Tap any sentence, keep reading.
简约 · 高效 · 专注的新概念英语在线点读（NCE1–NCE4）。

✨ 特性

句子级点读：点击任一句，从该句开始连续播放，自动高亮并居中
语言视图：EN / EN+CN / CN 三态切换（持久化保存）
现代 UI：Apple 风格、浅深色自适应、顺滑过渡
零依赖：纯静态 HTML/CSS/JS，可直接 GitHub Pages 部署
LRC 兼容：支持 英文|中文 同行，或“同时间戳上下两行”堆叠格式
批量翻译：内置 translate_lrc.py，可将纯英文 LRC 转双语（可原地写回）

🗂 目录结构

assets/          # 样式与脚本（styles.css, app.js, lesson.js）
index.html       # 首页（书目 + 课程列表）
lesson.html      # 课文点读页
static/data.json # 书目...

NCE-Flow：新概念英語オンライン点読プレイヤー