Skip to content

Kevindic0214/shadowing-player

Repository files navigation

繁體中文 | 简体中文 | English | 日本語 | 한국어

Shadowing Player

A YouTube sentence-by-sentence blind listening practice tool — focus on listening without looking at subtitles.

Features

  • Sentence-by-sentence playback — Automatically splits YouTube videos by subtitle segments, plays one sentence at a time then pauses
  • Auto-fetch captions — Automatically downloads YouTube captions via yt-dlp (supports multiple language switching)
  • Manual SRT paste — Also supports pasting any SRT subtitle content manually
  • Subtitle hide/reveal — Subtitles are hidden by default; click to reveal when needed (blind listening mode)
  • Auto repeat / Auto next — Enable single-sentence looping or continuous auto playback
  • Previous / Replay / Next — Full sentence navigation controls
  • Practice history — Automatically saves practice progress to localStorage; one-click restore next time
  • Keyboard shortcuts — Q Previous, W Replay, E Next, R Reveal subtitle, Shift+W Auto repeat, Shift+E Auto next

Quick Start

Prerequisites

Install & Run

npm install
npm start

Open your browser and go to http://localhost:8090

Usage

  1. Paste a YouTube URL
  2. Click "Fetch Captions" to auto-download, or paste SRT content manually
  3. Click "Start Practice" to enter the player
  4. Listen sentence by sentence, use keyboard shortcuts to control playback

Keyboard Shortcuts

Key Action
Q Previous sentence
W Replay
E Next sentence
R Show/hide subtitle
Shift+W Toggle auto repeat
Shift+E Toggle auto next

Tech Stack

  • Frontend: Pure HTML / CSS / JavaScript (no framework)
  • Backend: Express.js — proxies yt-dlp for caption fetching
  • Player: YouTube IFrame API
  • Storage: localStorage (practice history with debounced writes)

Project Structure

├── index.html    # Main page (setup screen + player screen)
├── style.css     # Styles (dark theme, responsive)
├── app.js        # Frontend logic (playback control, history, caption fetching)
├── i18n.js       # Internationalization (5 languages)
├── server.js     # Express backend (yt-dlp caption API)
└── package.json

License

MIT

About

A YouTube sentence-by-sentence blind listening practice tool — focus on listening without looking at subtitles.

Resources

Stars

1 star

Watchers

0 watching

Forks

Packages

 
 
 

Contributors