TextAlive App API

Build lyric apps — web applications that display song lyrics synchronized with music playback.

TextAlive App API is a JavaScript/TypeScript SDK for creating lyric apps: interactive web experiences where lyrics animate in sync with music. It connects to the TextAlive platform to retrieve beat timings, chord progressions, chorus segments, and per-character lyric timing — so your app stays perfectly in sync with any registered song.

Quick Start

Build your first lyric app in minutes with a working code example

Installation

Add TextAlive App API via npm or CDN script tag

Core Concepts

Understand the Player, song map, lyrics units, and timers

API Reference

Full reference for every class, interface, and utility

How it works

1. Get an app token

   Register at TextAlive for Developers to obtain an application token. This token identifies your app to the TextAlive platform.

2. Install the SDK

   Add the package via npm or load it from a CDN script tag — no build tools required for quick prototyping.

   npm install textalive-app-api
   
3. Initialize the Player

   Create a Player instance with your token and register event listeners to react to song loading and playback events.

   import { Player } from "textalive-app-api";
   
   const player = new Player({
     app: { token: "your-app-token" }
   });
   
4. Animate lyrics in sync

   Use onTimeUpdate to query the current phrase, word, or character at any playback position, and drive your animations from there.

Key features

Beat & chord sync

Query beats, chords, and chorus segments at any playback position using Songle’s music analysis

Hierarchical lyrics

Navigate lyrics as phrases, words, and characters — each with precise start/end timings

Custom timers

Plug in any audio backend — SongleWidget, HTML5 audio, or your own — via the Timer interface

TextAlive host integration

Embed your app inside the TextAlive platform to receive song changes and parameter updates from the host

Animation utilities

Built-in easing functions, 2D matrix math, and color helpers for smooth lyric animations

Font loading

Load Google Fonts and Morisawa TypeSquare fonts on demand for styled lyric rendering