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.
• scripts/ -- 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/opentype.js@latest/dist/opentype.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@sabre-js/sabre@latest/dist/sabre.min.js"></script>

How to include the library (from the unpkg CDN, for the more privacy minded):

<script src="https://unpkg.com/opentype.js@latest/dist/opentype.min.js"></script>
<script src="https://unpkg.com/@sabre-js/sabre@latest/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 = "";
    let fonts = [];
    // load the contents of the subtitle file into subs.
    // YOUR CODE HERE
    // load the fonts using opentype.js and put them in
    // the fonts array.
    // YOUR CODE HERE
    // pass the font parsing function to the renderer
    renderer = sabre.SABRERenderer(parseFont);
    renderer.loadSubtitles(subs,fonts);
    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 opentype.js as shown below:

function parseFont(data) {
    return opentype.parse(data);
}

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, fonts) ⇒ void

Begins the process of parsing the passed subtitles in SSA/ASS format into subtitle events.

setViewport(width, height) ⇒ void

Updates the resolution (in CSS pixels) 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

Updates the resolution (in CSS pixels) at which the subtitles are rendered (if the player is resized, for example).

Kind: global function

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

Fetches a rendered frame of subtitles as an object uri.

Kind: global function

Fetches a rendered frame of subtitles to a canvas.

Kind: global function

© 2012-2022 Patrick "ILOVEPIE" Rhodes Martin.