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.