### Vite Import Example

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

Example of how to import worker and font assets in a Vite project.

```javascript
import AssWorker from "./subtitles-octopus-worker.js?worker";
import fallbackFont from "./assets/default.woff2?url";
```

--------------------------------

### Get the Source Code

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

Clone the repository recursively to get the source code.

```bash
git clone --recursive https://github.com/libass/JavascriptSubtitlesOctopus.git
```

--------------------------------

### React Usage Example

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

Example of how to use SubtitleOctopus in a React component with Vite.

```jsx
// just import it and use
// vite should be able to bundle the worker, font and wasm files for you.
import SubtitleOctopus from "@biliblitz/libass-wasm";

useEffect(() => {
  const instance = new SubtitleOctopus({
    video: videoRef.value,
    canvas: canvasRef.value,
    subUrl: "my/ass/file.ass",
    fonts: ["font.otf", "font.ttf"],
  });
  return () => instance.dispose();
}, []);
```

--------------------------------

### Build without Containers

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

Build the project artifacts by installing dependencies and running make.

```bash
make
```

--------------------------------

### Basic SubtitlesOctopus Initialization

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

Example of initializing SubtitlesOctopus with options for video, subtitles, and fonts.

```javascript
var options = {
  video: document.getElementById("video"), // HTML5 video element
  subUrl: "/test/test.ass", // Link to subtitles
  fonts: ["/test/font-1.ttf", "/test/font-2.ttf"], // Links to fonts (not required, default font already included in build)
  workerUrl: "/libassjs-worker.js", // Link to WebAssembly-based file "libassjs-worker.js"
  legacyWorkerUrl: "/libassjs-worker-legacy.js", // Link to non-WebAssembly worker
};
var instance = new SubtitlesOctopus(options);
```

--------------------------------

### Cleaning up the object

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

Example of how to dispose of the SubtitlesOctopus instance when finished.

```JavaScript
var instance = new SubtitlesOctopus(options);

// After you've finished using it...

instance.dispose();
```

--------------------------------

### Changing subtitles dynamically

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

Example of how to dynamically change subtitles using setTrackByUrl.

```JavaScript
var instance = new SubtitlesOctopus(options);

// ... we want to change the subtitles to the Railgun OP
instance.setTrackByUrl('/test/railgun_op.ass');
```

--------------------------------

### SubtitlesOctopus Initialization with Canvas Only

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

Example of initializing SubtitlesOctopus to render subtitles on a canvas without a video element, requiring manual time setting.

```javascript
var options = {
  canvas: document.getElementById("canvas"), // canvas element
  subUrl: "/test/test.ass", // Link to subtitles
  fonts: ["/test/font-1.ttf", "/test/font-2.ttf"], // Links to fonts (not required, default font already included in build)
  workerUrl: "/libassjs-worker.js", // Link to file "libassjs-worker.js"
};
var instance = new SubtitlesOctopus(options);
// And then...
instance.setCurrentTime(15); // Render subtitles at 00:15 on your canvas
```

--------------------------------

### Build using Docker

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

Build the project artifacts using Docker.

```bash
./run-docker-build.sh
```

--------------------------------

### Build using Buildah

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

Build the project artifacts using Buildah.

```bash
./run-buildah-build.sh
```

--------------------------------

### Build without Containers on macOS

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

Build the project artifacts on macOS with libtool from brew.

```bash
LIBTOOLIZE=glibtoolize make
```

--------------------------------

### Vite Configuration

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

Configuration snippet for vite.config.ts to optimize dependencies.

```typescript
// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    exclude: ["@biliblitz/libass-wasm"],
  },
  // ...
});
```

--------------------------------

### Lossy Render Mode Configuration

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

To enable the experimental Lossy Render mode, set the renderMode to 'lossy' upon instance creation.

```javascript
new LibassRenderer({ renderMode: 'lossy' });
```

--------------------------------

### WASM Blending Configuration

Source: https://github.com/biliblitz/libass-wasm/blob/master/README.md

To enable WASM Blending, set the renderMode to 'wasm-blend' upon instance creation.

```javascript
new LibassRenderer({ renderMode: 'wasm-blend' });
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.