> ## Documentation Index
> Fetch the complete documentation index at: https://developer.audioshake.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Lyrics Editor

> Embed a lyrics synchronization and editing widget in your application

The AudioShake Lyrics Editor is an embeddable widget for lyric transcription, synchronization, and editing. It handles audio upload, transcription, and timing alignment — your users get an interactive lyrics editing experience without building it from scratch.

<Warning>The Lyrics Editor is available by request only. Contact [info@audioshake.ai](mailto:info@audioshake.ai) to request access and get your domain whitelisted.</Warning>

## 1. Add the iframe

Place an iframe in your HTML where the widget should appear:

```html theme={null}
<iframe height="600px" width="400px" id="lyricsWidget" frameborder="0"></iframe>
```

Minimum dimensions: 400px wide, 600px tall.

## 2. Load and initialize

Include the widget library and initialize it with your license ID:

```html theme={null}
<script src="https://assets.audioshake.ai/widget/lyrics/2.4.0/widget.bundle.js"></script>
```

```javascript theme={null}
document.addEventListener("DOMContentLoaded", () => {
  const lyricsWidget = new AudioShakeLyricsWidgetLib.LyricsWidget(
    "your_license_id",    // 25-character license ID
    "your_session_id",    // Custom session identifier
    "lyricsWidget",       // iframe element ID
    5,                    // Max requests per audio (optional, default: 5)
    "word"                // Timing mode: "line" or "word" (optional)
  );
});
```

## 3. Load audio

**Via HTML attributes:**

```html theme={null}
<div
  audioshake-lyrics-widget
  audioshake-audio-id="track_001"
  audioshake-audio-url="https://example.com/song.mp3"
  audioshake-transcript-url="https://example.com/transcript.txt"
  audioshake-language="en">
  Get lyrics
</div>
```

**Programmatically:**

```javascript theme={null}
lyricsWidget.loadTrack(audioId, audioUrl, language, transcriptUrl);
lyricsWidget.bindLoadingToElements();
```

The `transcriptUrl` and `language` parameters are optional. If no transcript is provided, the widget will transcribe the audio automatically.

## 4. Handle results

Register a callback to receive the aligned transcript when the user finishes editing:

```javascript theme={null}
lyricsWidget.registerOnResultReceived((result) => {
  const { audioId, audioUrl, alignedTranscriptUrl, assets } = result;
  // assets contains txt, json, and srt outputs
});
```

## Error handling

```javascript theme={null}
lyricsWidget.registerOnErrorReceived((error) => {
  console.error(`${error.code}: ${error.message}`);
});
```

## Customization

Style the widget to match your application:

```javascript theme={null}
lyricsWidget.customize({
  title: "Edit Lyrics",
  fontFamily: "Inter",
  colors: {
    background: "#FAFAFA",
    text: "#111",
    lyricsProgress: "#C938FF",
    primary: {
      regular: "#C938FF",
      hover: "#A020D0",
      text: "#FFF"
    }
  }
});
```

All fields are optional.