Sonaar’s MP3 Player features a Karaoke Mode that displays song lyrics in sync with the audio. You can see examples on our demo page.

How to Enable Karaoke Mode

To activate Karaoke Mode, you need a TTML (Timed Text Markup Language) file for the track.
There are various tools available to generate a TTML file from an audio file. One such tool is LyricPotato.

Once you have your TTML file:

1. Edit the post where your audio track is located.
2. Upload the TTML file in the “Lyrics/Karaoke file (.ttml)” option.

Now, when the track plays in the MP3 Player, the lyrics will be displayed at the bottom of the page.
You can expand the lyrics window by clicking on it.

Displaying Lyrics in a Popup

Lyrics can also be shown in a popup using a call-to-action button. To set this up:

1. Edit the post where the track is located.
2. In the “Optional Call To Action” settings:
   • Choose a label and icon for your button.
   • Set the Action to Pop-up.
   • Copy and paste the lyrics into the “Pop-up content” field.
3. If you want the pop-up to function as a Karaoke Mode, copy the contents of your TTML file into the “Pop-up content” field.

This will synchronize the lyrics with the track inside the pop-up window.

Lyric Placeholder: How to Add a Lyrics Placeholder on the Page?

You can insert a lyrics placeholder anywhere in your content using the following shortcode. This will display the lyrics of the currently playing song in the designated placeholder.

No attributes are required.

[sonaar_lyrics_placeholder]