Music HelperStep-by-step guide

Music Helper · version 0.1.0

From MP3s to a live music page

Drop in your songs, sort them into collections, time the lyrics so they light up line by line, check the page, then publish it. Everything happens in a page on your own computer.

FreeRuns on your PCReads your MP3s' tagsWorks with the Lyric Timer
The example site's music page, with the line being sung lit up.

Chapter 1

Get started

Do this once. The demo comes with an empty example site to try it on, and publishing is switched off, so nothing you do can change a real website.

  1. 1

    Install Node.js

    The helper runs on Node.js 20 or newer, free from nodejs.org. Choose the LTS version and click through its installer.

    Already have it? Skip this step.

    The Node.js download page
  2. 2

    Unzip it

    Download music-helper-0.1.0.zip (or music-helper-and-lyric-timer-0.1.0.zip, with the Lyric Timer), then right-click it and choose Extract All.

    The unzipped folder
  3. 3

    Double-click Music Helper

    A small window opens (keep it open while you work) and the helper appears in your browser at localhost:5191. Close the small window when you're done.

    The top bar says Example copy · publishing is off: this demo can't upload anything.

    The Music Helper with no songs yet
    The helper, ready for songs

Chapter 2

Add your songs

One song or a whole album at a time.

  1. 4

    Drop in your MP3s

    Drop MP3s on Add songs, or click it to choose them. The helper reads each file's tags: the title, the lyrics, the cover art and a link to where the song lives online. Fix any title by clicking it, choose a collection, then Add songs.

    Songs already in the library (the same link or title) are skipped.

    Adding three songs, with their titles and covers read from the files
    Three songs, read from their tags
  2. 5

    Sort them

    Collections group your songs (an album, a genre, a theme). Move songs and collections up and down to set their order on the page, and press the ★ to make one song the site's Featured Song.

    • The badges show what each song has: lyrics, timing, a link.
    • Songs without a collection go in Miscellaneous, always last.
    The library with a collection of three songs, one starred
    The library
  3. 6

    Edit a song

    The pencil opens a song: change its title, collection, link, cover or lyrics, or swap in a new version of the MP3. Lines in square brackets, like [Chorus], show as section labels.

    Editing a song: title, collection, link, cover and lyrics
    Editing a song

Chapter 3

Time the lyrics

So the lyrics light up line by line as the song plays on your site. Press the clock on a song with lyrics.

  1. 7

    Tap along

    Press Start from the top, then press Space (or Tap) as each line begins. Backspace undoes the last tap; clicking a line sets it to the current moment.

    • Slow the song down with Speed if it's quick.
    Timing the lyrics: the first three lines are timed
    Three lines timed
  2. 8

    Or load an .lrc file

    Already have the timing? Load LRC takes an .lrc file (the Lyric Timer makes them, as do many lyrics tools) and times every line whose words match.

    Every line timed from an .lrc file
    Timed from an .lrc file
  3. 9

    Check it, then save

    Preview plays the song with the lyrics following along exactly as your site will show them; click any line to jump there. Happy? Save timing.

    The timing preview, with the current line lit up
    The timing preview

Chapter 4

With the Lyric Timer

The Lyric Timer is a separate app with finer tools for timing (nudging a line, re-tapping from any point, captions for video). In the download with both, the two work together; its step-by-step guide covers its side.

  1. 10

    Open the song in the Lyric Timer

    In Time the lyrics, press Open in Lyric Timer. The song opens there with its lyrics and any timing it already has, ready to tap.

    The Lyric Timer with a song opened from the Music Helper
    The Lyric Timer, opened from the helper
  2. 11

    Send it back

    Press Send to Music Helper at the top. The timing lands on the song in the helper straight away, and the helper says so. Close the Lyric Timer's tab.

    Only lines whose words match the helper's lyrics get a time, so editing a line in the Lyric Timer never shifts the rest.

    The timing back in the Music Helper
    Back in the helper

Chapter 5

Preview and publish

  1. 12

    Preview the page

    Preview builds the site and opens its music page in a new tab: the songs by collection, the players, and the lyrics lighting up as each song plays.

    The example site's music page
    The example site's music page
  2. 13

    Publish

    Set up for your own website, Publish builds it, saves only the music changes and uploads them, then waits until the live page shows them. The top bar counts what's waiting to go live.

    In the demo, Publish is switched off. Publishing needs the helper set up for a website kept in a Git repository.

    Publishing, step by step

Chapter 6

Good to know

MP3s onlyTagged MP3s fill in their title, lyrics and cover by themselves; for others, type them in.
Your songs stay with youEverything is saved in the site's music folder on your computer. Nothing leaves it until you publish.
Trying the demoWhat you add goes in example-site\music. Delete that folder to start again.
The codehelper.mjs is the local server; helper.html is the page, including reading the tags and timing the lyrics.