Lyrics Editor

<iframe height="600px" width="400px" id="lyricsWidget" frameborder="0"></iframe>

<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)
  );
});

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

lyricsWidget.loadTrack(audioId, audioUrl, language, transcriptUrl);
lyricsWidget.bindLoadingToElements();

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

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

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