Lyric Auto-Scroller

Tutorials and Guides
1

With reference to:

Automatic Scrollbar by ScottFromScott and Scroll Automatique

here is my take on a lyric (with chords) scroller, using the webviewer, html and css animations:

LyricScroller.aia (6.1 KB)

Start:

image
image1265×789 61.4 KB

Finish:

image
image1263×790 62.9 KB

HTML 
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/57b929fbcb.js" crossorigin="anonymous"></script>

<head>
<title>LyricScroll</title>
<style>
html {
	background-color:black;
	margin: auto;
}



#scroll-container {

  background-color: black;
  border: 3px solid yellow;
  border-radius: 5px;
  height: 90vh;
  width: 100vw;
  overflow: hidden;
}

#scroll-container::-webkit-scrollbar {
    width: 0 !important;
}

#lyric-text {
  margin: 0 20px 0;	
  height: auto;
  text-align: left;
  font-size: 1.2em;
  color: white;
  
  /* animation properties */
  -webkit-animation-name: lyrics;
  -webkit-transform: translateY(2%);
  -webkit-animation-direction: up;
  -webkit-animation-duration: <!--SONG LENGTH IN SECONDS HERE - e.g. 180s -->;
  -webkit-animation-timing-function:linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;

}

/* for Chrome */
@-webkit-keyframes lyrics {
  from { -webkit-transform: translateY(2%); }
  to { -webkit-transform: translateY(-77%); }
}

}

</style>
</head>
<body>
<script>
	
/* Toggle Animations */
function playPause() {
if( document.getElementById("lyric-text").style.animationPlayState == "paused" ){
  document.getElementById("scroll-container").style.overflow = "hidden";	
  document.getElementById("lyric-text").style.animationPlayState = "running";
}else {
  document.getElementById("lyric-text").style.animationPlayState = "paused";
  document.getElementById("scroll-container").style.overflow = "auto";
  }
}

function reset() {
	location.reload();
}
</script>
<button id="play-pause" class="w3-btn w3-blue w3-margin w3-round" type="button" onclick="playPause()">Play / Pause</button>
<button id="reset" class="w3-btn w3-blue w3-margin w3-round" type="button" onclick="reset()">Reset</button>
<div id="scroll-container">

<div id="lyric-text">
<pre><code id="lyric-code">
<!--SONG LYRIC & CHORDS HERE (as text)-->
</code></pre>
</div>
</div>

<script>	
/* Start Paused */
document.getElementById("lyric-text").style.animationPlayState = "paused";
document.getElementById("scroll-container").style.overflow = "auto";
</script>	

</body>
</html>

Notes:

  1. This setup works well on a desktop (1980x1080 screen) and my Lenovo A10 tablet (Android 6) at (1232 x 800 screen). On a phone, it is unlikely to display the end of a song after scrolling, due to the screen height difference (landscape).
  2. Each song has its own html file
  3. You may need to make two adjustments in the html file, to get the scrolling "just right"
  • to { -webkit-transform: translateY(-77%); } - adjust by a few percentage points, up or down
  • -webkit-animation-duration: 180s; - you would normally set the duration to the length of the song, e.g. here is 180s (3mins). You might try adjusting this value up or down.
  1. When the scrolling is paused, you can manually scroll through the song.
  2. To create a new song html file, simply make a copy of one of the existing files, replace the existing song text with the new song text between the <pre><code>...</code></pre> tags, and change the song length value, in seconds, so for a 3 munites song, write 180s. Save the new file with the name of the song, up load to your assets, and edit your lists to include the new title.
2 Likes
2

Nice solution, @TIMAI2 !