Free Song Scroller

FREE SONG SCROLLER

My free song scroller allows musicians to automatically scroll lyrics and chords on a laptop, tablet, or smartphone with a supported web browser. Just provide the song duration, and the song scroller will adjust the scroll speed to match the length of the song. Never turn a page or click a button in the middle of a performance again.
The Song Scroller also provides a transcribe button that will transpose your song chords into a different key.

There's nothing to download or install. To create a new song, simply copy and paste the script below into a text editor. Replace the sample lyrics, chords, guitar tabs, and comments with your own. Then enter the song duration, save the file with an ".html" file extension, and open it in your web browser. It's that easy!

Song Scroller makes it easy to share songs with your friends, since anyone with a web browser can open them.

Here's the script:


<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, user-scalable=no"/> <meta charset="UTF-8">
<title>SongScroller v1.0 by Randy Altergott</title>
<script type="text/javascript">
window.scrollBy(0,1); 

// ENTER SONG DURATION HERE:
duration = 3*60+30; // in seconds

ss = 1; // scroll step in pixels
var t = new Array ("(H", "(G#", "(G", "(F#", "(F", "(E", "(D#", "(D", "(C#", "(C", "(B", "(A#", "(A", "(H");
function transup() {
for (a=0; a<t.length-1; a++){
document.getElementById('lyrics').innerHTML = document.getElementById('lyrics').innerHTML.split(t[a+1]).join(t[a]);}} 
function pageScroll() {
if (document.getElementById("scroll").innerText == "START SCROLL"){
autoscroll = setInterval("window.scrollBy(0, ss);", Math.round(duration *1000/((document.body.scrollHeight * ((((document.body.innerHTML.substring(document.body.innerHTML.indexOf('<font color')).split('\n').length - 3) / (document.getElementById('lyrics').innerText.split('\n').length -2))))) / ss)) ); 
document.getElementById("scroll").innerText = "STOP SCROLL";}
else {clearInterval(autoscroll); document.getElementById("scroll").innerText = "START SCROLL";}}
</script></head>
<body style="font-size:60px; font-weight:bold; color:#FFFFFF; background-color:#000000;" onLoad = "while(document.body.scrollWidth > window.innerWidth) {document.body.style.fontSize = parseInt(document.body.style.fontSize) - 1+'px';}; 
document.body.innerHTML = document.body.innerHTML.replace(/\u005B/g, '<font color=tomato>(');
document.body.innerHTML = document.body.innerHTML.replace(/\u005D/g, ')</font>');
document.body.innerHTML = document.body.innerHTML.replace(/\u007B/g, '<font color=skyblue>');
document.body.innerHTML = document.body.innerHTML.replace(/\u007D/g, '</font>');
while(((document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<font color')).split('\n').length - 4) / (document.getElementById('lyrics').innerText.split('\n').length-2) * document.body.scrollHeight) < (window.innerHeight/2))
{document.body.innerHTML = document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<font color')) +'\n' + document.body.innerHTML.substring(document.body.innerHTML.indexOf('<font color'));} 
w=0; for (a=0; a < document.getElementById('lyrics').innerText.split('\n').length; a++) { if(document.getElementById('lyrics').innerText.split('\n')[a].length > w) {w= document.getElementById('lyrics').innerText.split('\n')[a].length;}} 
if(w>50){alert('Lyric width is '+ (w) +' characters. Split lyrics into shorter lines if text is too small.');} 
">
<a style="position:fixed; bottom:1%; left:1%; font-size:150%; font-weight:bold; background-color:yellow;" href="javascript: pageScroll();" id="scroll" >START SCROLL</a>
<a style="position:fixed; bottom:1%; right:1%; font-size:150%; font-weight:bold; background-color:yellow;" href="javascript: transup();" id="tu" >TRANS+</a>
<pre id="lyrics" style="font-size:100%; font-weight:bold;">
<!-- PASTE LYRICS BELOW THIS LINE -->

PLACE THE SONG TITLE, GUITAR CHORD FINGERINGS,
CAPO POSITION, OPENING COMMENTS, AND ANY 
GUITAR TABS HERE AT THE TOP
OF THE SONG TEXT.

GRANDMA GOT RUN OVER BY A REINDEER
Gmaj7 = 3 2 0 0 0 2
G7 = 3 2 0 0 0 1

INTRO TAB:
e:-------------------2-:
B:-----------------1---:
G:---------------2-----:
D:-------------0-------:
A:-----2-0-3-2---------:
E:-2-3-----------------:

[-- PLACE GUITAR CHORDS, INLINE COMMENTS, AND
INLINE GUITAR TABS INSIDE SQUARE BRACKETS 
TO DISPLAY THEM IN RED. --]

[--PLAY INTRO TAB--]
{[G]GRANDMA GOT RUN OVER BY A [Gmaj7]REINDEER
[G7]WALKING HOME FROM OUR HOUSE CHRISTMAS [C]EVE
YOU CAN SAY THERES NO SUCH THING AS [G]SANTA
BUT [D]AS FOR ME AND GRANDPA WE BE[G]LIEVE}

[G]SHE'D BEEN DRINKING TOO MUCH [Gmaj7]EGG NOG
[G7]AND WE WARNED HER NOT TO [C]GO
BUT SHE FORGOT HER MEDI[G]CATION
AND [D]WANDERED OUT THE DOOR INTO THE [G]SNOW

[G]WHEN WE FOUND HER CHRISTMAS [Gmaj7]MORNING
[G7]AT THE SCENE OF THE [C]ATTACK
THERE WERE HOOFPRINTS ON HER [G]FOREHEAD
IN[D]CRIMINATING CLAW MARKS ON HER [G]BACK

{ANY TEXT INSIDE CURLY BRACKETS WILL BE DISPLAYED
IN BLUE. THIS FEATURE CAN BE USED TO IDENTIFY
VOCAL EFFECTS OR SECOND-SINGER LYRICS FOR DUETS.}

{[G]GRANDMA GOT RUN OVER BY A [Gmaj7]REINDEER
[G7]WALKING HOME FROM OUR HOUSE CHRISTMAS [C]EVE
YOU CAN SAY THERES NO SUCH THING AS [G]SANTA
BUT [D]AS FOR ME AND GRANDPA WE BE[G]LIEVE}

[G]IT'S JUST NOT CHRISTMAS WITHOUT [Gmaj7]GRANDMA
[G7]ALL THE FAMILYS DRESSED IN [C]BLACK
AND WE JUST CANT HELP BUT [G]WONDER
SHOULD WE [D]OPEN UP HER GIFTS 
OR SEND THEM [G]BACK

[G]NOW WERE ALL SO PROUD OF [Gmaj7]GRANDPA
[G7]HE'S BEEN TAKING THIS SO [C]WELL
SEE HIM IN THERE WATCHING [G]FOOTBALL
DRINKING [D]BEER AND PLAYING CARDS 
WITH COUSIN [G]MEL

{[G]GRANDMA GOT RUN OVER BY A [Gmaj7]REINDEER
[G7]WALKING HOME FROM OUR HOUSE CHRISTMAS [C]EVE
YOU CAN SAY THERES NO SUCH THING AS [G]SANTA
BUT [D]AS FOR ME AND GRANDPA WE BE[G]LIEVE}

[G]NOW THE GOOSE IS ON THE [Gmaj7]TABLE
[G7]AND THE PUDDING MADE OF [C]FIG
AND THE BLUE AND SILVER [G]CANDLES
THAT [D]WOULD'VE MATCHED THE HAIR 
IN GRANDMAS [G]WIG

[G]I'VE WARNED ALL MY FRIENDS AND [Gmaj7]NEIGHBORS
[G7]BETTER WATCH OUT FOR YOUR [C]SELVES
THEY SHOULD NEVER GIVE A [G]LICENSE
TO A [D]MAN WHO DRIVES A SLEIGH 
AND PLAYS WITH [G]ELVES

[--INLINE GUITAR TABS REPRESENT A SERIES OF 
SINGLE NOTES. EACH NOTE IS REPRESENTED BY 
A STRING NAME AND FRET NUMBER. 
A LOWER CASE 'e' IS USED FOR THE THINNER 
HIGH E-STRING, AND A CAPITAL 'E'
FOR THE HEAVIER LOW E-STRING.--]
[--HERE'S AN EXAMPLE OF AN INLINE TAB 
WITH 8 CONSECUTIVE NOTES:--]

[tab: E3,A0,A2,A3,D0,D2,D4,D0]

{[G]GRANDMA GOT RUN OVER BY A [Gmaj7]REINDEER
[G7]WALKING HOME FROM OUR HOUSE CHRISTMAS [C]EVE
YOU CAN SAY THERES NO SUCH THING AS [G]SANTA
BUT [D]AS FOR ME AND GRANDPA WE BE[G]LIEVE}

</pre></body></html>

Click here and use the yellow "Start Scroll" button to see the song scroller in action.

FAQ:

When I open my song file, I get a blank page. How do I fix this?
This can usually be fixed by clicking the refresh button in your browser.

How do I add guitar chords?
Place square brackets [ ] around each guitar chord to display them in red.
Example: [D][Dmaj7][Bm][Bm/A][G]

My song is scrolling to slow or too fast. How do I fix this?
1.) Enter the correct song duration, in seconds, at the beginning of the script where the words "Enter Song Duration Here" appear. If necessary, use a stopwatch to time your performance.
2.) Make sure the song title, chord fingerings, capo position, opening comments, and any multi-line guitar tabs are located at the beginning of the song and that they don't include any square "[" or curly "{" brackets. The first bracket should divide the body of the song from all opening notes and tab daigrams. If the song begins with guitar, the first bracket should be located at the chord, tab comment, or inline tab that starts the song. If the song begins with vocals, add an empty set of curly brackets "{}" at the beginning of the first lyric line.
3.) Break up long blocks of guitar chords. Long guitar intro's and solo breaks written as blocks of chords may need to be broken into multiple lines, so that the time duration of each line is comparable to other lines in the song.
4.) For best results, begin your performance when the first lyric or red text is scrolling past the center of the screen.

How do I add guitar tabs?
Place all multi-line guitar tabs at the beginning of the song and label them with a name like "Riff#1" or "Intro". Use the tab name in a comment wherever the riff should be played:
[--Play Riff#1--]
Tabs lasting longer than a few seconds may need to have empty rows inserted below the comment to prevent the scrolling from moving on too quickly.
Inline tabs can be used for simple single-note riffs. Inline tabs display notes by string name and fret number. A lower-case 'e' is used for the thinner high e-string, and a capital 'E' for the heavier low e-string. Here's a G major scale written as an inline tab:
[tab: E3,A0,A2,A3,D0,D2,D4,G0,G2,B0,B1,B3,e0,e2,e3]

The text/font size is too small. How do I make the text larger?
Edit your song to break up long lines of text. Song Scroller avoids wrapping text so that each line is displayed as the writer intended. This helps maintain the rhythm and continuity of the song. For most devices, lines should be kept under 50 characters in length.

How do I add comments?
Place square brackets [ ] and double-dashes around comments to display them in red. The double-dashes help to quickly distinguish comments from chords:
Comment example: [--Slower tempo--]

How do I add second-singer lyrics for duets or harmonies?
Placing curly brackets { } around lyrics will display them in blue. This feature can be used to identify lyrics intended for a second singer.
Example: I like ice cream {I like it, too!}

About
Booking
Audio
Songs
Free Song Scroller