Skip to main content

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.

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