Browser-based media player and Chrome extension for subtitle sentence mining
asbplayer is a browser-based media player and Chrome extension developed for language learners who learn their target language through subtitled media. With asbplayer, you can:
Thank you to all of my sponsors:
@vivekchoksi, @nzarbayezid, @ManuJapan, AdamM, realgoodsmiley, Alex, @m4eko, Simon, Attenius, medyas, @zaerald, Suna, @tony7253, @voothi, kibo, @genericdave
and to those who have donated privately.
Thank you to all those who have contributed to asbplayer:
@Renji-XD, @MatiasIslaA, @cyphar, @alexbofa, @Zyphdoz, @artjomsR, @iam6lake, @bpwhelan, @pooky-programs, @m-edlund
Thank you to all those who have translated asbplayer:
Mana Tsutsumi (Japanese, initial translation), Kai Böse (German), Triline (Polish), NeverWinterSwor (Simplified Chinese), Yagxter (Brazilian Portuguese), Leo Gonzalez (Spanish), Yuri (ganqqwerty) (Russian)
If you are a non-English native, and would like to help translate asbplayer, please contact me on Discord.
[!NOTE]
asbplayer is both a subtitle control and flashcard creation tool. If you are not interested in flashcards, and only want to use asbplayer's subtitle features, you can read about them under Subtitle features.
First, see if you can get started by following one of the community guides.
Otherwise, the following steps for setting up automated Anki flashcards should work for any language:
Install and set up a dictionary tool for your target language that allows you to do instant lookups. Popular ones are Yomitan for Japanese and VocabSieve for European languages.
Install Anki, and create a deck and note type. More details on Refold's guide.
Install the AnkiConnect plugin for Anki.
Configure asbplayer to create cards via AnkiConnect using your deck and note type.
Enhance a video using asbplayer and subtitle files.
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 flashcard creator.
Fill in the definition and word fields and then export the card. To fill in the definition field you may use the dictionary you installed in step 1.
Text guides:
Video guides:
To use asbplayer with streaming video, install the Chrome extension. Otherwise, use the website.
In order to make use of any of asbplayer's features, subtitles (or an empty subtitle track) must first be loaded, either onto a streaming video or a local video file. The following section instructs how to do this.
There are a number of ways to load subtitles with streaming video:
Open Side Panel
from the extension popup). When a video element is on screen, click on the Load Subtitles
button to open the same subtitle track selector in (3).asbplayer features will then be accessible for that video.
Drag-and-drop media and subtitle files into the asbplayer website to load them. asbplayer features will then be accessible for those files. Not all media files may be compatible - see the Browser Compatibility section.
Use Ctrl + Left/Right to adjust subtitle offset so that the previous/next subtitle appears at the current timestamp. Then use Ctrl + Shift + Left/Right for finer adjustment by 100ms increments.
If you are using the asblayer website, you can also use the Subtitle Offset
text field available in the controls UI.
Use Ctrl + Shift + F to see auto-detected subtitle tracks for streaming video. Below are the sites where automatic subtitle detection is supported:
Ctrl + Shift + F also allows you to load an empty subtitle track so that you can extract audio and screenshots from streaming video without loading subtitles.
If you'd like to filter out specific instances subtitle text, one way to do so is by using a regular expression (regex). asbplayer can match any sequence following a specified regex pattern and remove the matches.
Under the MISC section in asbplayer settings, locate the "Subtitle regex filter" textbox. Enter an appropriate regex to filter desired content. You can replace filtered content similarly by entering a string into the "Subtitle regex filter text replacement" textbox. Leaving this blank will simply remove the content.
Useful examples of regular expressions:
(\(|().*(\)|))
: Remove names enclosed by parenthesis to indicate speakers (i.e. "(山田) 元気ですか?")\[.*\]
: Remove indications enclosed by brackets that sound or music that is playing (i.e. "[PLAYFUL MUSIC]")Learn how to write and test custom regular expressions at Regex Learn - Playground.
Once loaded into the extension, you can download the subtitles by opening the side panel and clicking the Download Subtitles as SRT
button in the top-right. You can also download subtitles via the website by clicking the same download button in the top-left.
Note: Using the regex feature will alter the .srt that is downloaded.
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, use Ctrl + Shift + X to open the flashcard creator.
See the keyboard shortcuts for other ways to interact with and create cards.
All text fields can be edited from the flashcard creator prior to flashcard creation.
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 to the card using the buttons available in the sentence and audio sections of the card. See this video for a demo.
Most of the extension features detailed above can be accessed through the extension's side panel UI. The side panel can be opened with the ` button or Open Side Panel
from the extension popup.
Keyboard shortcuts are customizable from the settings or from accessing the extension directly. Once asbplayer has been bound to a video, you can use the keyboard shortcuts to access most of asbplayer's features.
By default some UI appears at the top of streaming video when it is paused. It can be toggled on/off from the settings. It exists primarily to make it possible to sentence mine on Kiwi Browser for Android, with buttons/fields to mine a subtitle, load subtitles, and adjust subtitle offset.
An audio track selector will appear for mkv
files if experimental web platform features are enabled from chrome://flags
. Note that enabling this flag may cause issues with other features of asbplayer, such as card creation through the Chrome extension.
asbplayer can be setup to support one-click mining workflows by integrating with other tools via its WebSocket interface and a locally-running proxy that intercepts AnkiConnect traffic. Below are steps to set up such a workflow using Yomitan:
cd scripts/anki-connect-proxy
go run main.go
http://127.0.0.1:8766
for the AnkiConnect URL.+
button on asbplayer subtitles will now trigger the flashcard creator with word and definition fields pre-populated by Yomitan.See the proxy's example configuration file for how to further configure it.
The asbplayer website can be controlled remotely through a WebSocket connection, which enables one-click mining flows with the right setup. Currently asbplayer responds to one type of payload:
{
"command": "mine-subtitle",
// Message ID to correlate with asbplayer's response
"messageId": "10281760-d787-4356-8572-f698d8ff3884",
"body": {
// 0 = "None", 1 = "Show anki dialog", 2 = "Update last card", 3 = "Export card"
"postMineAction": 1,
// Key-value pairs corresponding to an Anki note type
"fields": {
"key1": "value1",
"key2": "value2"
}
}
}
Response:
{
"command": "response",
// Same message ID received in request
"messageId": "10281760-d787-4356-8572-f698d8ff3884",
"body": {
// Whether the command was successfully published to the website
"published": true
}
}
https://killergerah.github.io
with no slash at the end (and not https://killergerah.github.io/asbplayer
).chrome://flags
.chrome://extensions/shortcuts
.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 latest versions of Chrome can decode H.265 video as long as hardware acceleration is enabled. The animebook readme has a detailed explanation of this and links to browsers that have good compatibility.
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.
# Install yarn
npm install --global yarn
# Make sure you're on yarn 3
yarn set version 3.2.0
# Install dependencies
yarn
# Starts the development server for the website
yarn workspace @project/client run start
# Build the Chromium version of the extension to extension/dist/chromium
yarn workspace @project/extension buildDev
# Build the Firefox version of the extension to extension/dist/firefox
yarn workspace @project/extension buildDev --env firefox
# Build the Firefox for Android version of the extension to extension/dist/firefoxandroid
yarn workspace @project/extension buildDev --env firefoxandroid
If you have problems building try deleting node_modules
and re-running yarn
.
Submit bugs or feature requests from the issues page. Join the Discord server to talk with me and other language learners.
If you've benefited from asbplayer, please consider supporting my work via Github Sponsors or Ko-fi.