### Install CueSync via jsDelivr CDN

Source: https://cuesync.github.io/2.0/installation

Include the CueSync JavaScript file directly from jsDelivr CDN for instant integration. This method is convenient for quick setup.

```html
<!-- CueSync JS -->
<script src="https://cdn.jsdelivr.net/npm/@cuesync/cuesync@2.0.0/dist/js/cuesync.min.js"
        integrity="sha384-RpHsvYVjmvzPcZvnEEhED/Ak7wWjOC/VvcwaDXj87I9fJXNy2SF0OreIznbkrWbK"
        crossorigin="anonymous"></script>

```

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

### Install CueSync using npm

Source: https://cuesync.github.io/2.0/installation

Install CueSync as a package in your project using npm for more control over usage and updates. This is the recommended method for project integration.

```bash
npm i @cuesync/cuesync

```

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

### VTT Transcript Format Example

Source: https://cuesync.github.io/2.0/examples

Example of a VTT transcript file. CueSync supports VTT for timing and text, with optional language metadata.

```text
WEBVTT
Language: Hindi

00:00:02 --> 00:00:03
कीट

00:00:03 --> 00:00:06
खुरदरे, गूदेदार

00:00:06 --> 00:00:09
ओह, वह मुलायम है
```

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

### Install CueSync via unpkg CDN

Source: https://cuesync.github.io/2.0/installation

Include the CueSync JavaScript file directly from unpkg CDN for seamless integration. This is an alternative CDN option.

```html
<!-- CueSync JS -->
<script src="https://unpkg.com/@cuesync/cuesync@2.0.0/dist/js/cuesync.min.js"
        integrity="sha384-RpHsvYVjmvzPcZvnEEhED/Ak7wWjOC/VvcwaDXj87I9fJXNy2SF0OreIznbkrWbK"
        crossorigin="anonymous"></script>

```

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

### SRT Transcript Format Example

Source: https://cuesync.github.io/2.0/examples

Example of an SRT transcript file. CueSync supports SRT, recognizing cue numbers and timestamps with comma decimal separators.

```text
1
00:00:02 --> 00:00:03
bugs

2
00:00:03 --> 00:00:06
give me the scaly the squishy

3
00:00:06 --> 00:00:09
oh she's fluffy
```

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

### Import CueSync JS in your project

Source: https://cuesync.github.io/2.0/installation

Import the CueSync JavaScript library into your project after installing it via npm. This makes the library's functionalities available for use.

```javascript
import * as cuesync from '@cuesync/cuesync'

```

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

### Custom CSS Theming for CueSync

Source: https://cuesync.github.io/2.0/examples

Apply custom styles to the CueSync component by overriding CSS custom properties. This example demonstrates setting various theme properties like border, colors, and hover effects.

```html
<style>
.custom-cuesync {
 --cs-border-color: #aa076b;
 --cs-border-radius: 20px;
 
 --cs-toolbar-bg: #aa076b;
 --cs-toolbar-color: #fff;
 
 --cs-transcript-bg: #aa076b;
 --cs-transcript-color: #fff;

 --cs-cue-hover-bg: #e47aaf;
 --cs-cue-hover-color: #000;
 --cs-cue-active-bg: #ffd75e;
 --cs-cue-active-color: #aa076b;
 --cs-cue-highlight-color: #ffd75e;
 
 --cs-timestamp-bg: #ffd75e;
 --cs-timestamp-color: #aa076b;
 --cs-timestamp-border-radius: 20px;
}
</style>

<!-- Video -->
<video id="natGeoVideo8" controls style="width: 100%; max-width: 500px;">
    <source src="/assets/videos/natgeo.mp4" type="video/mp4">
    Your browser does not support HTML video.
</video>

<!-- Transcript -->
<cue-sync class="custom-cuesync" transcript-path="/assets/transcripts/natgeo.vtt, /assets/transcripts/natgeo_hindi.vtt" 
          media="#natGeoVideo8"
          style="height: 400px;"></cue-sync>
```

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

### Basic CueSync Integration

Source: https://cuesync.github.io/2.0/examples

Integrate CueSync by adding a <cue-sync> element with transcript-path and media attributes. This sets up an interactive transcript for your video.

```html
<!-- Video -->
<video id="natGeoVideo" controls style="width: 100%; max-width: 500px;">
    <source src="/assets/videos/natgeo.mp4" type="video/mp4">
    Your browser does not support HTML video.
</video>

<!-- Transcript -->
<cue-sync transcript-path="/assets/transcripts/natgeo.vtt" 
          media="#natGeoVideo"
          style="height: 400px;"></cue-sync>
```

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

### Set Light Theme in CueSync

Source: https://cuesync.github.io/2.0/examples

Use the 'theme' attribute to set the default theme to 'light'. Other options include 'auto' and 'dark'.

```html
<!-- Video -->
<video id="natGeoVideo5" controls style="width: 100%; max-width: 500px;">
    <source src="/assets/videos/natgeo.mp4" type="video/mp4">
    Your browser does not support HTML video.
</video>

<!-- Transcript -->
<cue-sync transcript-path="/assets/transcripts/natgeo.vtt" 
          media="#natGeoVideo5" 
          theme="light"
          style="height: 400px;"></cue-sync>
```

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

### Provide Multilingual Transcripts in CueSync

Source: https://cuesync.github.io/2.0/examples

Specify multiple transcript file paths, separated by commas, in the 'transcript-path' attribute to enable language selection.

```html
<!-- Video -->
<video id="natGeoVideo7" controls style="width: 100%; max-width: 500px;">
    <source src="/assets/videos/natgeo.mp4" type="video/mp4">
    Your browser does not support HTML video.
</video>

<!-- Transcript -->
<cue-sync transcript-path="/assets/transcripts/natgeo.vtt, /assets/transcripts/natgeo_hindi.vtt" 
          media="#natGeoVideo7"
          style="height: 400px;"></cue-sync>
```

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

### Accessing the CueSync Component via JavaScript

Source: https://cuesync.github.io/2.0/examples

Select the CueSync web component from the DOM using standard JavaScript query methods. This is the first step to interacting with the component programmatically.

```javascript
const cueSync = document.querySelector('cue-sync');
```

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

### CueSync with Paragraph Layout

Source: https://cuesync.github.io/2.0/examples

Configure CueSync to use the 'paragraph' layout by setting the layout attribute. This changes how the transcript is displayed.

```html
<!-- Video -->
<video id="natGeoVideo2" controls style="width: 100%; max-width: 500px;">
    <source src="/assets/videos/natgeo.mp4" type="video/mp4">
    Your browser does not support HTML video.
</video>

<!-- Transcript -->
<cue-sync transcript-path="/assets/transcripts/natgeo.vtt" 
          media="#natGeoVideo2" 
          layout="paragraph"
          style="height: 400px;"></cue-sync>
```

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

### Disable Settings Panel in CueSync

Source: https://cuesync.github.io/2.0/examples

Set the 'allow-settings' attribute to 'false' to hide the settings button and disable user customization options.

```html
<!-- Video -->
<video id="natGeoVideo6" controls style="width: 100%; max-width: 500px;">
    <source src="/assets/videos/natgeo.mp4" type="video/mp4">
    Your browser does not support HTML video.
</video>

<!-- Transcript -->
<cue-sync transcript-path="/assets/transcripts/natgeo.vtt" 
          media="#natGeoVideo6" 
          allow-settings="false"
          layout="paragraph"
          show-timestamp="false"
          style="height: 400px;"></cue-sync>
```

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

### Listening for CueSync Custom Events

Source: https://cuesync.github.io/2.0/examples

Add event listeners to the CueSync component to react to changes in its attributes, such as layout updates. The event detail provides the new value of the changed attribute.

```javascript
const cueSync = document.querySelector('cue-sync');

cueSync.addEventListener('layout-changed', e => {
  console.log('Layout changed to:', e.detail.newValue);
});
```

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

### Dynamically Modifying CueSync Attributes

Source: https://cuesync.github.io/2.0/examples

Update HTML attributes of the CueSync component using JavaScript's `setAttribute()` method. This allows for dynamic changes to layout and theme.

```javascript
const cueSync = document.querySelector('cue-sync');

cueSync.setAttribute('layout', 'paragraph');
cueSync.setAttribute('theme', 'dark');
```

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

### Calling the redrawTime() Public Function

Source: https://cuesync.github.io/2.0/examples

Invoke the `redrawTime()` public function on the CueSync component instance to recalculate the width of the timestamp column. This is useful when font sizes or styles affecting timestamps are modified.

```javascript
const cueSync = document.querySelector('cue-sync');

cueSync.redrawTime();
```

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

### Disable Auto Scroll in CueSync

Source: https://cuesync.github.io/2.0/examples

Set the 'auto-scroll' attribute to 'false' to disable the automatic scrolling of the transcript to the current cue.

```html
<!-- Video -->
<video id="natGeoVideo4" controls style="width: 100%; max-width: 500px;">
    <source src="/assets/videos/natgeo.mp4" type="video/mp4">
    Your browser does not support HTML video.
</video>

<!-- Transcript -->
<cue-sync transcript-path="/assets/transcripts/natgeo.vtt" 
          media="#natGeoVideo4" 
          auto-scroll="false"
          style="height: 400px;"></cue-sync>
```

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

### CueSync with Timestamps Hidden

Source: https://cuesync.github.io/2.0/examples

Hide timestamps in the transcript by setting the show-timestamp attribute to 'false'. This provides a cleaner transcript view.

```html
<!-- Video -->
<video id="natGeoVideo3" controls style="width: 100%; max-width: 500px;">
    <source src="/assets/videos/natgeo.mp4" type="video/mp4">
    Your browser does not support HTML video.
</video>

<!-- Transcript -->
<cue-sync transcript-path="/assets/transcripts/natgeo.vtt" 
          media="#natGeoVideo3" 
          show-timestamp="false"
          style="height: 400px;"></cue-sync>
```

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