Skip to main content
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.