asbplayer

A browser-based media player for subtitle sentence mining, hosted at https://killergerbah.github.io/asbplayer/. Combine subtitles and media extracted from streaming or local video sources to create media-rich Anki flashcards.

Talk with me and other language learners on Discord.

Supporters

Thank you to all of my sponsors: @vivekchoksi @nzarbayezid @ManuJapan

If you've benefited from asbplayer, please consider supporting my work via Github Sponsors or Ko-fi.

Usage

Loading files

Drag-and-drop media and subtitle files into the asbplayer window to load them.

Syncing with streaming video

Install the Chrome extension. There are two ways to sync streaming video with asbplayer:

1. Drag-and-drop a subtitle file into the video element you want to sync.
2. Load a file into asbplayer 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.

Creating Anki flashcards

Integration with AnkiConnect can be configured in the settings as in this video.

Ctrl+Shift+X (default bind) for streaming video or Ctrl+Shift+Q for local media files opens the Anki export dialog.

Ctrl+Shift+Z (default bind) for streaming video or Ctrl+Shift+A for local media files will mine the current subtitle without opening the Anki export dialog. Cards can later be exported for these subtitles by opening the copy history in asbplayer.

Adjusting Anki flashcards

All text fields can be edited before exporting an 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 checkmark buttons in either the sentence or audio fields. See this video for a demo of this.

Changing subtitle offset

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 text field in the controls, typing a number, and pressing Enter.

Subtitle track detection for streaming video

Ctrl+Shift+F (default bind) 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)

Ctrl+Shift+F also allows you to choose an empty subtitle track so that you can mine streaming video without subtitles.

Audio track selection for mkv files

An audio track selector will appear for mkv files if experimental web platform features are enabled from chrome://flags.

Keyboard shortcuts

Common issues

asbplayer isn't detecting streaming video.

• 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.

The extension keyboard shortcuts aren't working.

• Check chrome://extensions/shortcuts and make sure the shortcuts you're trying to use are bound.
• 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.

The asbplayer website keyboard shortcuts aren't working.

• The asbplayer website keyboard shortcuts are different from the extension keyboard shortcuts. When using the asbplayer site e.g. for playing local media files use the correct shortuts as described above e.g. Ctrl+Shift+Q instead of Ctrl+Shift+X.

asbplayer can't connect to Anki. It shows an error message e.g. 'Failed to fetch.'

• 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.

asbplayer isn't including audio/screenshot in flashcards.

• 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.

asbplayer isn't properly cropping screenshots from 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.

Demos

• Sentence mining streaming video with asbplayer (synchronous workflow)
• Sentence mining streaming video with asbplayer (asynchronous workflow)
• Sentence mining streaming video with asbplayer (no subtitle file)
• Sentence mining video files with asbplayer (synchronous workflow)
• Sentence mining video files with asbplayer (synchronous workflow using Yomichan export)
• Sentence mining video files with asbplayer (asynchronous workflow)

Community guides

• Shiki's Lazy Sentence Mining Workflow
• Sentence mining from Netflix and YouTube with asbplayer

Browser compatibility

The asbplayer application and extension have only been tested on Chrome 101 and later 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.

Contributing

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

Building and running

# 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.