asbplayer is a browser-based media player and Chrome extension for subtitle sentence mining, hosted at https://killergerbah.github.io/asbplayer/. Use asbplayer to combine subtitles and media extracted from streaming or local video sources to create media-rich Anki flashcards.
Submit bugs or feature requests from the issues page. Join the Discord server to talk with me and other language learners.
Thank you to all of my sponsors: @vivekchoksi @nzarbayezid @ManuJapan AdamM realgoodsmiley
If you've benefited from asbplayer, please consider supporting my work via Github Sponsors or Ko-fi.
If your target language is Japanese, follow one of the community guides.
Otherwise, the following steps will work for any language:
- Install a popup dictionary Chrome extension for your target language.
- Install the asbplayer Chrome extension.
- Install Anki, and create a deck and note type.
- Install the AnkiConnect plugin for Anki.
- Configure asbplayer to create cards via AnkiConnect with your deck and note type.
- Drag-and-drop a subtitle file into the streaming video you want to mine. You may have to adjust the subtitle offset to get the subtitles in sync.
- When a subtitle appears that you want to mine, use Ctrl+Shift+X to open the Anki dialog.
- Fill in the definition and word fields and then export the card. To fill in the definition field you may use the popup dictionary you installed in step 1.
Install the Chrome extension. There are two ways to sync streaming video with asbplayer:
- Drag-and-drop a subtitle file into the video element you want to sync.
- Load a file into the asbplayer site and click on the camera in the bottom right to pick a video element to sync. This is the recommended way to load BluRay subtitle files onto streaming video.
Drag-and-drop media and subtitle files into the asbplayer site to load them.
Make sure Anki and AnkiConnect are installed. Integration with AnkiConnect can be configured in the settings as in this video.
When a subtitle that you want to mine appears, Ctrl+Shift+X opens the Anki export dialog.
All text fields can be edited from the Anki export dialog before exporting the Anki flashcard.
To adjust audio or subtitle selection, adjust the selected time interval for the card using the slider at the bottom of the export dialog. The newly selected time interval can be applied using the buttons in either the sentence or audio fields. See this video for a demo of this.
Ctrl+Left/Right will adjust subtitle offset so that the previous/next subtitle appears at the current timestamp. Ctrl+Shift+Left/Right will adjust offset by 100 ms increments.
You can also adjust offset manually by clicking on the "Subtitle Offset" text field in the controls in the asbplayer tab, typing a number, and pressing Enter.
Ctrl+Shift+F will show detected subtitle tracks for streaming video. Below are the sites where automatic subtitle detection is supported:
- Netflix (on main /watch url)
- Youtube (on main /watch url)
- TVer
Ctrl+Shift+F also allows you to choose an empty subtitle track so that you can mine streaming video without subtitles.
An audio track selector will appear for mkv files if experimental web platform features are enabled from chrome://flags.
Most keyboard shortcuts shared by the extension and the website are customizable from the asbplayer website settings. Extension-only shortcuts and some shared shortcuts that require special access to Chrome extension features are customizable from chrome://extension/shortcuts. Below are the default shortcuts.
| Action | Keys |
|---|---|
| Mine current subtitle | Ctrl+Shift+Z (unbound by default when extension is installed) |
| Mine current subtitle and open Anki export dialog | Ctrl+Shift+X |
| Update last-created Anki card with asbplayer-captured screenshot, audio, etc | Ctrl+Shift+U |
| Manually take screenshot, overriding the one that is automatically taken when mining | Ctrl+Shift+V (extension only) |
| Manually start/stop audio recording, even when a subtitle file is loaded. | (unbound by default, extension only) |
| Select video element to mine without a subtitle file, or with detected subtitles on supported sites | Ctrl+Shift+F (extension only) |
| Play/pause | Space |
| Toggle auto-pause | Shift+P |
| Toggle subtitles | S |
| Toggle subtitle track 1 or 2 in video | 1, 2... |
| Toggle subtitle track 1 or 2 in asbplayer | W+1, W+2... |
| Seek backward/forward by 10 seconds | A/D |
| Seek to previous/next subtitle | Left/Right |
| Seek to beginning of current subtitle | Down |
| Adjust offset to previous/next subtitle | Ctrl+Left/Right or Shift+Left/Right |
| Adjust offset by ±100ms | Ctrl+Shift+Left/Right |
| Adjust playback rate by ±0.1 | Ctrl+Shift+[/] |
- Try refreshing both the asbplayer tab and the video in the other tab.
- Make sure that in the extension details, the extension has access to all sites. A lot of video players are loaded inside of iframes, so it's difficult to know every single URL that the extension might need access to.
- Check
chrome://extensions/shortcuts. - Check the keyboard shortcut settings from the asbplayer website.
- You can also check the currently-bound shortcuts from the extension popup menu.
- Try uninstalling and reinstalling the extension and restarting Chrome.
- Make sure the extension isn't installed twice.
- Check the keyboard shortcut settings from the asbplayer website.
- If you're using Brave, make sure asbplayer isn't being blocked by Shield.
- Make sure that asbplayer is allowed by AnkiConnect, as in this video.
- Check that your browser or an ad blocker isn't blocking the request. A good place to start is by opening your browser's developer console and looking for errors.
- See the Browser Compatibility section.
- If you're mining streaming video make sure you use an extension keyboard shortcut (Ctrl+Shift+X by default) from the tab with the streaming video.
- If the site is using an iframe for the video player then asbplayer won't know how to crop the screenshot properly. You will have to mine subtitles in fullscreen mode.
- Make sure the browser zoom setting is at 100%.
- You can also disable cropping altogether using the extension settings menu.
The asbplayer application and extension have only been tested on the latest version Chrome and likely work on other Chromium-based browsers.
Local video file playback is supported only for codecs supported by the browser. The animebook readme has a detailed explanation of this and links to browsers that have good compatibility. Personally, I use Microsoft Edge and paid one dollar for HEVC support.
Pull requests are welcome! However, to reduce back-and-forth during review ideally consult with me on the corresponding issue or on Discord before attempting changes to UI/UX. When making changes, format code according to the Prettier config and attempt to match the style of surrounding code.
Thank you to all those who have contributed to this project: @Renji-XD @MatiasIslaA @cyphar
# Install yarn
npm install --global yarn
# Make sure you're on yarn 3
yarn set version berry && yarn set version canary
# Install dependencies
yarn
# Starts the development server
yarn workspace @project/client run start
# Build the extension to extension/dist
yarn workspace @project/extension buildDev
If you have problems building try deleting node_modules and re-running yarn.