## Documentation Index

Fetch the complete documentation index at: [/llms.txt](https://developer.audioshake.ai/llms.txt)

Use this file to discover all available pages before exploring further.

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.

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

## 1. Add the iframe

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

```
<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:

```
<script src="https://assets.audioshake.ai/widget/lyrics/2.4.0/widget.bundle.js"></script>
```

```
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:**

```
<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:**

```
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:

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

## Error handling

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

## Customization

Style the widget to match your application:

```
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.