A Gpu Accelerated Javascript Advanced Substation Alpha Subtitles Renderer.
SABRE.js is a full renderer for Substation Alpha Subtitles and Advanced Substation Alpha Subtitles. It allows you to draw styled/stylized subtitles over web video with multiple fonts, colors, animations and effects.
- Javascript-Subtitles-Octopus
- Libass
- XY-VSFilter
A gallery of major milestones in the development process.
To view the gallery click here if you're using a decent browser or here if you like safari or internet explorer.
- src/ -- Main sourcecode for the project (excluding src/__tests__)
- src/__tests__/ -- Test code for test driven development.
- include/ -- Browser API definitions and internal API definitions for the Closure Compiler (Files in this folder aren't compiled).
- bin/ -- Output directory for production code.
- debugbin/ -- Output directory for debug code.
- sbin/ -- Contains scripts that are run by the makefile.
- tbin/ -- Contains the Closure Compiler and other build tools.
- temp_files/ -- Temporary files.
- test/ -- Directory used when running the debug server.
How to include the library (from the jsdelivr CDN, this cdn is recommended as they publish usage statistics for each package):
<script src="https://cdn.jsdelivr.net/npm/@sabre-js/sabre/dist/sabre.min.js"></script>How to include the library (from the unpkg CDN, for the more privacy minded):
<script src="https://unpkg.com/@sabre-js/sabre/dist/sabre.min.js"></script>You can retrieve an instance of the library by calling sabre.SABRERenderer like so from a load event handler:
let renderer;
window.addEventListener("load",() => {
let subs = "";
// load the contents of the subtitle file into subs
// pass the font loading function to the renderer
renderer = sabre.SABRERenderer(loadFont);
renderer.loadSubtitles(subs);
renderer.setViewport(1280,720); // use the video player's dimensions.
// schedule your frame callback using either requestAnimationFrame or requestVideoFrameCallback
});and passing it a function that loads fonts using the CSS Font loading API.
Here we provide a font loading function that you can use for testing:
function loadFont(name) {
// check if font is already loaded
if (!document.fonts.check("12px '" + name + "'")){
// if the name has an extension, load from local fonts
if (name.indexOf(".") !== -1) {
const newFont = new FontFace(name, `url(./fonts/${name})`);
newFont.load().then((font) => document.fonts.add(font));
}else{
// otherwise, load from google fonts and add stylesheet to document
let link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("media", "print");
link.setAttribute("type", "text/css");
link.setAttribute("onload", "this.media='all';");
link.setAttribute(
"href",
`https://fonts.googleapis.com/css?family=${name}:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i`
);
document.head.appendChild(link);
}
}
//Force the font to load.
let force_load = document.createElement("span");
force_load.setAttribute(
"style",
`font-family: '${name}';position:absolute;top:-999999px;left:0px;`
);
force_load.appendChild(document.createTextNode("Force Load"));
document.body.appendChild(force_load);
}You may then call loadSubtitles passing in a string containing the contents of the subtitle file and set the
viewport with setViewport as shown in the example above. Anytime the video or player is resized you should call
setViewport with the new dimensions of the player.
Each frame, before you call any of the rendering functions, first call checkReadyToRender to see if the library is ready
to render a frame of subtitles.
- loadSubtitles(subsText) ⇒
void Begins the process of parsing the passed subtitles in SSA/ASS format into subtitle events.
- setViewport(width, height) ⇒
void Updates the resolution at which the subtitles are rendered (if the player is resized, for example).
- checkReadyToRender() ⇒
boolean Checks if the renderer is ready to render a frame.
- getFrame(time) ⇒
ImageBitmap Fetches a rendered frame of subtitles as an ImageBitmap, returns null if ImageBitmap is unsupported.
- getFrameAsUri(time, callback) ⇒
void Fetches a rendered frame of subtitles as an object uri.
- drawFrame(time, canvas, [contextType]) ⇒
void Fetches a rendered frame of subtitles to a canvas.
Begins the process of parsing the passed subtitles in SSA/ASS format into subtitle events.
Kind: global function
| Param | Type |
|---|---|
| subsText | string |
Updates the resolution at which the subtitles are rendered (if the player is resized, for example).
Kind: global function
| Param | Type | Description |
|---|---|---|
| width | number |
the desired width of the resolution. |
| height | number |
the desired height of the resolution. |
Checks if the renderer is ready to render a frame.
Kind: global function
Returns: boolean - is the renderer ready?
Fetches a rendered frame of subtitles as an ImageBitmap, returns null if ImageBitmap is unsupported.
Kind: global function
| Param | Type | Description |
|---|---|---|
| time | number |
the time at which to draw subtitles. |
Fetches a rendered frame of subtitles as an object uri.
Kind: global function
| Param | Type | Description |
|---|---|---|
| time | number |
the time at which to draw subtitles. |
| callback | function |
a callback that provides the URI for the image generated. |
Fetches a rendered frame of subtitles to a canvas.
Kind: global function
| Param | Type | Description |
|---|---|---|
| time | number |
the time at which to draw subtitles. |
| canvas | HTMLCanvasElement | OffscreenCanvas |
the target canvas |
| [contextType] | string |
the context type to use (must be one of "bitmap" or "2d"), defaults to "bitmap" unless unsupported by the browser, in which case "2d" is the default. |
© 2012-2022 Patrick "ILOVEPIE" Rhodes Martin.