<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: 王俊俊</title>
    <description>The latest articles on DEV Community by 王俊俊 (@_d713d35749a9d64072798).</description>
    <link>https://dev.to/_d713d35749a9d64072798</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4173527%2F3c957472-e77e-46b1-8da0-93544eb80695.jpg</url>
      <title>DEV Community: 王俊俊</title>
      <link>https://dev.to/_d713d35749a9d64072798</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/_d713d35749a9d64072798"/>
    <language>en</language>
    <item>
      <title>A practical way to study recorded lectures line by line</title>
      <dc:creator>王俊俊</dc:creator>
      <pubDate>Fri, 30 Oct 2026 08:38:09 +0000</pubDate>
      <link>https://dev.to/_d713d35749a9d64072798/a-practical-way-to-study-recorded-lectures-line-by-line-2fk3</link>
      <guid>https://dev.to/_d713d35749a9d64072798/a-practical-way-to-study-recorded-lectures-line-by-line-2fk3</guid>
      <description>&lt;p&gt;Recorded lectures are easy to collect and hard to review. A 70-minute class becomes a file you scrub through, and the sentence you actually needed is gone by the time you pause.&lt;/p&gt;

&lt;p&gt;I stopped treating the video as the study material. I turn it into a transcript first, then study the text with the audio still attached.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I do with a lecture recording
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Generate subtitles from the recording. Speech-to-text in the lecture's language is enough to make the class searchable. Video transcription and audio-to-text cover about 99 languages, which matters when the course is not in English.&lt;/li&gt;
&lt;li&gt;If I am studying the language of the lecture, I add a second subtitle track. Translation covers about 109 languages, with a free option and an AI option, so I can keep the original line and a translation under it.&lt;/li&gt;
&lt;li&gt;I study one sentence at a time. A-B repeat on a single line is more useful than replaying a whole slide. Pointing at a word opens a lookup, and I save a vocab card that keeps the original sentence plus a short audio clip, not just the isolated word.&lt;/li&gt;
&lt;li&gt;When a course drops many files, I batch the subtitles and export or print the lines I want to review. Podcast RSS works the same way when the lecture is an episode rather than a classroom video.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The page I keep open for this workflow is &lt;a href="https://langscribe.online/en/transcribe-lecture-videos/" rel="noopener noreferrer"&gt;transcribe lecture videos&lt;/a&gt;. It is the lecture-specific entry, not a general homepage.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why the transcript beats another replay
&lt;/h2&gt;

&lt;p&gt;A transcript lets me search for a term the professor said once. Bilingual subtitles let me check meaning without leaving the line. The audio clip on the vocab card is what I actually hear again later, so the card is tied to that lecture instead of a dictionary example.&lt;/p&gt;

&lt;p&gt;I still watch the video when a diagram matters. For language and for review, the subtitle file is the thing I come back to.&lt;/p&gt;

</description>
      <category>education</category>
      <category>languagelearning</category>
      <category>subtitles</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Translating SRT Subtitle Files for Language Study Without Breaking the Timestamps</title>
      <dc:creator>王俊俊</dc:creator>
      <pubDate>Tue, 20 Oct 2026 02:15:11 +0000</pubDate>
      <link>https://dev.to/_d713d35749a9d64072798/translating-srt-subtitle-files-for-language-study-without-breaking-the-timestamps-4e0o</link>
      <guid>https://dev.to/_d713d35749a9d64072798/translating-srt-subtitle-files-for-language-study-without-breaking-the-timestamps-4e0o</guid>
      <description>&lt;p&gt;If you study a language with films or series, you probably end up with a pile of &lt;code&gt;.srt&lt;/code&gt; files: subtitles from a release, a course download, or a file you exported after fixing a few lines yourself. They look like plain text, so the obvious move is to paste them into a translator. That usually goes wrong in small, annoying ways. Here is what an SRT file actually contains, why naive translation breaks it, and a workflow that keeps the file usable for study.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is inside an SRT file
&lt;/h2&gt;

&lt;p&gt;Each subtitle block (a "cue") has three parts:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;42
00:03:15,200 --&amp;gt; 00:03:18,050
I didn't think you'd actually come.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A sequence number, a start and end time, and one or two lines of text. Players match the text to the picture using only those timestamps. Change them, and the line appears too early, too late, or not at all.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why pasting into a translator breaks it
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Timestamps get "translated."&lt;/strong&gt; Some tools reformat &lt;code&gt;00:03:15,200&lt;/code&gt; into something else, or swap the comma for a period, and the player rejects the file.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lines merge or split.&lt;/strong&gt; Translators like full sentences, so a sentence spread over two cues often comes back as one block, and the cue count no longer matches.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Context is lost.&lt;/strong&gt; Translating cue by cue makes short lines ("Again?", "Fine.") ambiguous. Translating the whole file at once makes it hard to map each sentence back to its cue.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The original disappears.&lt;/strong&gt; For a learner this is the biggest loss. You wanted the English &lt;em&gt;next to&lt;/em&gt; the original, not instead of it.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  A study-friendly workflow
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Keep the original file untouched.&lt;/strong&gt; Treat it as the source of truth for timing.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Translate text only, cue by cue, with a little surrounding context.&lt;/strong&gt; The translation of cue 42 should know what cues 41 and 43 say, but the result must still land on cue 42.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Show both languages on the same cue.&lt;/strong&gt; Original on top, translation below. You read the real line first and glance down only when you need to.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hide one side to test yourself.&lt;/strong&gt; Watch a scene with only the original, then check the translation afterwards. Or hide the original and try to recall it from the English.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Loop the hard lines.&lt;/strong&gt; When a line is fast, loop just that cue a few times and shadow it.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Doing it in practice
&lt;/h2&gt;

&lt;p&gt;You can do steps 1–2 with a script (parse the cues, send the text with neighbouring lines as context, write the results back to the same indices), but most learners just want the result. I use &lt;a href="https://langscribe.online/en/translate-srt-to-english/" rel="noopener noreferrer"&gt;LangScribe to translate an SRT file to English&lt;/a&gt;: you import the SRT (or VTT/ASS), each cue keeps its original timestamp, and an English line is placed under it. There is a free translation option for everyday use and an AI translation that follows the surrounding cues for better wording. Importing the file itself is free.&lt;/p&gt;

&lt;p&gt;Once the file is in, the study part is the same as with any video: bilingual subtitles on screen, previous/next line with one key, A–B repeat on a single cue, and click a word to look it up and save it as a vocabulary card with its original sentence. If you have no subtitle file at all, the same tool can run speech to text on the audio first and give you a timed transcript to work from.&lt;/p&gt;

&lt;h2&gt;
  
  
  A few tips
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Check the language of the file first.&lt;/strong&gt; Some "English" SRTs are machine translations themselves. Translating a translation compounds the errors.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Don't fix timing and translation in the same pass.&lt;/strong&gt; If the file is out of sync, shift it first, then translate.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Keep an exported copy.&lt;/strong&gt; Export the bilingual or translated version as a new SRT so the original stays clean.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;An SRT file is already a study text with perfect timing. The trick is to add a translation without destroying the very thing that makes it useful.&lt;/p&gt;

</description>
      <category>languagelearning</category>
      <category>subtitles</category>
      <category>productivity</category>
      <category>beginners</category>
    </item>
    <item>
      <title>From Video to Markdown Study Notes: A Transcript Workflow for Language Learners</title>
      <dc:creator>王俊俊</dc:creator>
      <pubDate>Sun, 18 Oct 2026 08:14:17 +0000</pubDate>
      <link>https://dev.to/_d713d35749a9d64072798/from-video-to-markdown-study-notes-a-transcript-workflow-for-language-learners-5014</link>
      <guid>https://dev.to/_d713d35749a9d64072798/from-video-to-markdown-study-notes-a-transcript-workflow-for-language-learners-5014</guid>
      <description>&lt;p&gt;If you already keep your notes in Markdown, you can turn almost any video or podcast episode into a tidy language-study file. This note describes the workflow I use: get an accurate transcript, add a translation, pull out sentences worth keeping, and review them later. It works for any target language and takes about twenty minutes per episode.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Pick short, re-watchable material
&lt;/h2&gt;

&lt;p&gt;Choose clips of 5 to 15 minutes: a news segment, a YouTube explainer, one scene from a series, or a podcast chapter. Short material matters because you will listen to the same lines several times. Long videos tend to turn into passive watching.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Generate the transcript first
&lt;/h2&gt;

&lt;p&gt;Everything in this workflow depends on having the exact words. Manual transcription is a great exercise for a single minute of audio, but it does not scale. I run the file through a speech-to-text tool, then fix obvious mistakes while listening once at normal speed.&lt;/p&gt;

&lt;p&gt;For this step I use &lt;a href="https://langscribe.online/en/ai-subtitles-language-learning/" rel="noopener noreferrer"&gt;LangScribe's AI subtitles for language learning&lt;/a&gt;. It does audio transcription and subtitle generation for roughly 99 spoken languages and can translate the result into about 109, so one file gives me both the original line and a bilingual subtitle track.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Export to a Markdown table
&lt;/h2&gt;

&lt;p&gt;Once the transcript is clean, I paste it into a note with a simple layout:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Time&lt;/th&gt;
&lt;th&gt;Original&lt;/th&gt;
&lt;th&gt;Translation&lt;/th&gt;
&lt;th&gt;Notes&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;00:42&lt;/td&gt;
&lt;td&gt;Je n'en reviens pas.&lt;/td&gt;
&lt;td&gt;I can't believe it.&lt;/td&gt;
&lt;td&gt;idiom, informal&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;01:15&lt;/td&gt;
&lt;td&gt;Ça vaut le coup.&lt;/td&gt;
&lt;td&gt;It's worth it.&lt;/td&gt;
&lt;td&gt;very common&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;A table keeps every sentence anchored to a timestamp, so you can jump back and replay it.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Mark only what you would actually say
&lt;/h2&gt;

&lt;p&gt;Do not copy every new word. Highlight sentences that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;contain a phrase you have heard more than once,&lt;/li&gt;
&lt;li&gt;express something you want to say in your own life,&lt;/li&gt;
&lt;li&gt;show grammar you keep getting wrong.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Ten good sentences per episode beats sixty random words.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Shadow line by line
&lt;/h2&gt;

&lt;p&gt;Play one sentence, pause, and repeat it out loud, copying rhythm and intonation. A player that loops a single subtitle line makes this much easier than dragging a progress bar. Do each highlighted sentence three to five times.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Turn sentences into review cards
&lt;/h2&gt;

&lt;p&gt;Move the highlighted rows into your spaced-repetition tool. Keep the original sentence on the card, not just the isolated word, because context is what makes the word stick. Some players can save a word together with the sentence and audio snippet it came from, which saves a lot of copying.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Review, then re-watch
&lt;/h2&gt;

&lt;p&gt;After a week of card reviews, watch the clip again without subtitles. You will usually understand far more than the first time, and that feedback is the best motivation to repeat the loop with the next episode.&lt;/p&gt;

&lt;h2&gt;
  
  
  A minimal template
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gu"&gt;## Episode: &amp;lt;title&amp;gt;  (&amp;lt;language&amp;gt;, &amp;lt;length&amp;gt;)&lt;/span&gt;
Source: &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;or&lt;/span&gt; &lt;span class="na"&gt;file&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
Date: &lt;span class="nt"&gt;&amp;lt;yyyy-mm-dd&amp;gt;&lt;/span&gt;

&lt;span class="gu"&gt;### Key sentences&lt;/span&gt;
| Time | Original | Translation | Notes |
|------|----------|-------------|-------|

&lt;span class="gu"&gt;### Words to review&lt;/span&gt;

&lt;span class="gu"&gt;### Shadowing done&lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; [ ] pass 1   - [ ] pass 2   - [ ] pass 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Copy it, fill it in after each video, and in a month you will have a searchable notebook of real sentences in your target language.&lt;/p&gt;

</description>
      <category>languagelearning</category>
      <category>productivity</category>
      <category>markdown</category>
      <category>ai</category>
    </item>
    <item>
      <title>Building a Speech-to-Text Study Workflow for Language Learners</title>
      <dc:creator>王俊俊</dc:creator>
      <pubDate>Sat, 17 Oct 2026 17:04:08 +0000</pubDate>
      <link>https://dev.to/_d713d35749a9d64072798/building-a-speech-to-text-study-workflow-for-language-learners-2mh</link>
      <guid>https://dev.to/_d713d35749a9d64072798/building-a-speech-to-text-study-workflow-for-language-learners-2mh</guid>
      <description>&lt;p&gt;Most language learners have the same problem: they find a great podcast, YouTube lecture, or interview in their target language, listen once, understand maybe 40 percent, and move on. The input was good, but nothing stuck. A simple speech-to-text workflow fixes that by turning fleeting audio into text you can actually study.&lt;/p&gt;

&lt;p&gt;This post walks through the workflow I use and recommend. It is tool-agnostic in spirit, but I will mention where a dedicated app saves time.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why text matters for listening practice
&lt;/h2&gt;

&lt;p&gt;Listening comprehension improves fastest when you can close the gap between what you &lt;em&gt;heard&lt;/em&gt; and what was &lt;em&gt;actually said&lt;/em&gt;. Without a transcript, you never find out which words you misheard, which contractions confused you, or which phrases you simply did not know. With a transcript, every confusing moment becomes a concrete, searchable item.&lt;/p&gt;

&lt;p&gt;Transcripts also let you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Re-read difficult passages at your own pace&lt;/li&gt;
&lt;li&gt;Extract vocabulary in its original context&lt;/li&gt;
&lt;li&gt;Shadow sentences line by line&lt;/li&gt;
&lt;li&gt;Compare the original with a translation without losing your place&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Step 1: Pick input slightly above your level
&lt;/h2&gt;

&lt;p&gt;Choose audio or video where you understand the topic but not every sentence. Podcasts with clear speakers, short interviews, and conference talks work well. Ten to twenty minutes is plenty for one session.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Generate a transcript
&lt;/h2&gt;

&lt;p&gt;Run the audio through a transcription engine. Modern models handle dozens of languages with accents and background noise far better than tools from a few years ago. For learners, the key features are timestamps per line, so you can jump back to the exact moment, and support for your target language.&lt;/p&gt;

&lt;p&gt;I use &lt;a href="https://langscribe.online/en/" rel="noopener noreferrer"&gt;speech to text&lt;/a&gt; in LangScribe for this step because it covers roughly 99 languages and outputs timed lines I can study directly, instead of a wall of text.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Add a translation layer (carefully)
&lt;/h2&gt;

&lt;p&gt;Translations are a safety net, not a crutch. Put the original line on top and the translation beneath, and only glance at the translation after you have tried to parse the original. Bilingual subtitles are a great format here: you keep the audio, the original, and the meaning in one view.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 4: Study line by line
&lt;/h2&gt;

&lt;p&gt;This is where the real learning happens. For each line:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Listen without reading.&lt;/li&gt;
&lt;li&gt;Read the transcript and listen again.&lt;/li&gt;
&lt;li&gt;Note any words you misheard and why (linking, reductions, unknown vocabulary).&lt;/li&gt;
&lt;li&gt;Repeat the line out loud (shadowing).&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Five minutes of audio studied this way beats an hour of passive listening.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 5: Save vocabulary with the sentence
&lt;/h2&gt;

&lt;p&gt;Isolated word lists are easy to forget. Save each new word together with the sentence it appeared in and, ideally, the timestamp. When you review the card later, you remember the speaker, the context, and the sound, which makes the word much stickier. Click-to-look-up dictionaries inside the transcript make this nearly frictionless.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 6: Review and re-listen
&lt;/h2&gt;

&lt;p&gt;A few days later, listen to the same audio again without the transcript. You will be surprised how much clearer it sounds. Then review your vocabulary cards with spaced repetition.&lt;/p&gt;

&lt;h2&gt;
  
  
  Automating the boring parts
&lt;/h2&gt;

&lt;p&gt;If you are a developer, you can script parts of this pipeline: fetch new podcast episodes from an RSS feed, transcribe them, split them into timed segments, and export cards to your SRS. If you would rather not build it yourself, look for a tool that combines transcription, translation, subtitle generation, and vocabulary saving in one place so the workflow stays fast enough to do daily.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final thoughts
&lt;/h2&gt;

&lt;p&gt;The magic is not in any single tool; it is in turning audio into something you can pause, read, question, and save. Build that loop once, and every podcast in your feed becomes a structured lesson.&lt;/p&gt;

</description>
      <category>languagelearning</category>
      <category>ai</category>
      <category>productivity</category>
      <category>tools</category>
    </item>
    <item>
      <title>Transcribing Video in the Browser Without Uploading the Film</title>
      <dc:creator>王俊俊</dc:creator>
      <pubDate>Fri, 09 Oct 2026 23:03:59 +0000</pubDate>
      <link>https://dev.to/_d713d35749a9d64072798/transcribing-video-in-the-browser-without-uploading-the-film-5gif</link>
      <guid>https://dev.to/_d713d35749a9d64072798/transcribing-video-in-the-browser-without-uploading-the-film-5gif</guid>
      <description>&lt;p&gt;I needed timed subtitles for language study videos that already lived on my disk. Uploading a two-hour lecture to a transcription SaaS felt wrong for privacy and for bandwidth. The shape that worked was: keep the media element local, demux audio in the browser, and send only short mono chunks to a Worker.&lt;/p&gt;

&lt;h2&gt;
  
  
  The constraint
&lt;/h2&gt;

&lt;p&gt;Playback stays in the page. Local files and direct links (MP4, WebM, HLS) go straight into a &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; / media element. A signed-out library can live in IndexedDB. Sign-in can sync &lt;em&gt;library metadata and subtitle tracks&lt;/em&gt;; the film itself never becomes an upload.&lt;/p&gt;

&lt;p&gt;That split forces the transcription path to be audio-only.&lt;/p&gt;

&lt;h2&gt;
  
  
  Chunked audio instead of a full upload
&lt;/h2&gt;

&lt;p&gt;When a file has no usable subtitles, the client:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Demuxes audio in the browser&lt;/li&gt;
&lt;li&gt;Skips long silences when possible&lt;/li&gt;
&lt;li&gt;Encodes short 16 kHz mono segments (roughly 20â€“30 seconds)&lt;/li&gt;
&lt;li&gt;POSTs each chunk to a Cloudflare Worker&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The Worker runs speech-to-text (Workers AI / Whisper-class model), returns timed text, and the client turns that into cues. Existing SRT, VTT, and ASS imports follow the same cue model, so "I already have subtitles" and "generate them" share one player.&lt;/p&gt;

&lt;p&gt;Keeping requests small matters more than clever batching. Failed chunks retry without restarting a multi-gigabyte upload.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why a Worker on the same host helps
&lt;/h2&gt;

&lt;p&gt;A single host serving the Vue app and the API avoids CORS theater for cookie/session flows and keeps the mental model simple: one origin for the player shell. Hono on a Worker is enough for auth, credit accounting, and the STT proxy.&lt;/p&gt;

&lt;h2&gt;
  
  
  The learning loop is the product
&lt;/h2&gt;

&lt;p&gt;None of the model work matters if seeking is clumsy. The UI unit is a subtitle cue: previous / next, replay, loop one line, or loop an Aâ€“B range. Bilingual cues sit on the video. Word lookup opens against &lt;em&gt;that sentence&lt;/em&gt;, not a generic dictionary homepage.&lt;/p&gt;

&lt;p&gt;If you study from files you already have, that architecture is what I shipped in &lt;a href="https://langscribe.online/en/ai-subtitles-language-learning/" rel="noopener noreferrer"&gt;LangScribe&lt;/a&gt; local playback, optional AI captions, and a player built around the line you are trying to hear.&lt;/p&gt;

</description>
      <category>browser</category>
      <category>javascript</category>
      <category>privacy</category>
    </item>
    <item>
      <title>I built a language-learning player</title>
      <dc:creator>王俊俊</dc:creator>
      <pubDate>Fri, 09 Oct 2026 13:32:27 +0000</pubDate>
      <link>https://dev.to/_d713d35749a9d64072798/i-built-a-language-learning-player-1hi3</link>
      <guid>https://dev.to/_d713d35749a9d64072798/i-built-a-language-learning-player-1hi3</guid>
      <description>&lt;p&gt;I wanted the thing I actually do when I study: open a lecture or a show, see the line in two languages, hit replay until the sentence sticks, and click a word I do not know. Desktop players can do pieces of this. Most of them also want an install, a GPU stack, and an API key before the first video plays.&lt;/p&gt;

&lt;p&gt;So I built LangScribe as a website. The interesting constraint was privacy: the video file should stay on the machine. Subtitles and a library can sync. The film should not.&lt;/p&gt;

&lt;h2&gt;
  
  
  What runs where
&lt;/h2&gt;

&lt;p&gt;The app is one Vue 3 frontend. A Cloudflare Worker (Hono) serves the built site and the API on the same host, so the player and the account API are not two deployments.&lt;/p&gt;

&lt;p&gt;Playback never leaves the browser. Local files and direct links (MP4, WebM, HLS) are handed to the media element. A signed-out library lives in IndexedDB. Sign in with Google and the library plus subtitle tracks sync; the video file still does not get uploaded.&lt;/p&gt;

&lt;p&gt;That split is the whole product. Guest mode has to be useful. Cloud mode has to be optional.&lt;/p&gt;

&lt;h2&gt;
  
  
  Subtitles without shipping the film
&lt;/h2&gt;

&lt;p&gt;If a video has no subtitles, the browser demuxes the audio, skips silence, and uploads short 16 kHz mono chunks, about 20–30 seconds each. Speech-to-text is Cloudflare Workers AI, Whisper large-v3-turbo. The worker returns timed text; the client turns that into cues and can export SRT. Existing SRT, VTT, and ASS files import the same way.&lt;/p&gt;

&lt;p&gt;I did not want a second "upload your course to our servers" step. Chunked audio is enough for transcription, and it keeps the request small.&lt;/p&gt;

&lt;h2&gt;
  
  
  Translation that can see the previous line
&lt;/h2&gt;

&lt;p&gt;Free translation works without an account, line by line, as you watch.&lt;/p&gt;

&lt;p&gt;AI translation is the path that cares about context. Lines go up in small batches with a few preceding subtitle pairs, to a Llama 3.3 70B model on Workers AI. A batch that fails to parse falls back to single-line calls. The player only asks for lines near the playhead, then refills when you are about to run out of translated text. Word lookup is a separate, cached call: part of speech, a short explanation in that sentence, pronunciation.&lt;/p&gt;

&lt;p&gt;Credits apply to AI subtitles, AI translation, and AI lookups. Free translation does not. The server records usage; the page does not decide that a feature is free.&lt;/p&gt;

&lt;h2&gt;
  
  
  The player loop
&lt;/h2&gt;

&lt;p&gt;None of the model work matters if seeking feels clumsy. The UI is built around the cue list: previous line, next line, replay, loop one line, or loop an A–B range. Bilingual cues sit on the video. Click a word and the card opens on that sentence, not on a dictionary homepage.&lt;/p&gt;

&lt;p&gt;That is the architecture I would keep if I rewrote the UI: local media, optional account, audio-only transcription, translation with a little context, and a player that treats a subtitle line as the unit of study.&lt;/p&gt;

&lt;p&gt;If you learn from video, you can try it at &lt;a href="https://langscribe.online/en/local-video-language-learning/" rel="noopener noreferrer"&gt;LangScribe&lt;/a&gt;. &lt;/p&gt;

</description>
      <category>showdev</category>
      <category>vue</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
