JSFiddle - React, Tailwind, and code Playground

by and7ey

HTML

<div id="div"></div>

CSS

#div {
    font-size: 20pt;
    font-family: Verdana;
}

JavaScript

var songtext;
$(document).ready(function() {
    songtext = [ // [text, duration]
        ["Th", 500],
        ["is ", 500],
        ["is ", 200],
        ["a ", 200],
        ["very ", 500],
        ["good ", 500],
        ["son", 1000],
        ["g", 1000],
        ["te", 1000],
        ["xt!", 1000]
    ];
    var text="";
    $.each(songtext, function(a, b) {
        text += "<span id='p"+a+"' style='color:blue'>" + b[0] + "</span>";
    });
    
    $('#div').html(text);
    
    cc=0;
    
    nextWord();
});

var cc = 0;
function nextWord() {
    $('#p'+cc).css("color", "red");
    cc++;
    if(cc> songtext.length-1) return;
    window.setTimeout(nextWord, songtext[cc-1][1]);
}