@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Alef:wght@400;700&display=swap'); div.naturallanguageform { width: 900px; margin: 2% auto; max-width: 95%; min-height: 400px; border-radius: 5px; color: #000; font-size: 1.5em; } div.nlfinner { width: 96%; padding: 2%; text-align: right; } p.line { line-height: 1.5em; font-family: 'Alef', sans-serif; font-weight: 300; } input.textinput { background: none; border: 0; border-bottom: 1px dashed #EEE; width: auto; font-size: 1em; color: #B5E655; font: inherit; } input.textinput:focus { outline: none; border-bottom: 1px dashed #D00; } .subs span { color: #00c8cf; text-transform: capitalize; background-color: #00c8cf; } hover { color:#00c8cf; }

Psalm 23: Audio With Text Highlighted - click title!

(function (win, doc) { var audio = new Audio(); audio.id = "audioPlayer"; // Set an ID for the audio element var subtitles = doc.getElementById("subtitles"); var syncData = [ { "end": "1.713", "start": "1.297", "text": "מִזְמוֹר" }, { "end": "2.866", "start": "2.023", "text": "כַּף גּימֵל" + '\n' }, { "end": "3.988", "start": "3.521", "text": "1." + '\n' }, { "end": "3.988", "start": "3.521", "text": " מִזְמֹור " }, { "end": "4.540", "start": "4.070", "text": "לְדָוִד" }, { "end": "6.800", "start": "6.116", "text": "יְהוָה" }, { "end": "7.385", "start": "6.810", "text": "רֹעִי " }, { "end": "7.924", "start": "7.654", "text": "לֹא " }, { "end": "8.674", "start": "8.000", "text": "אֶחְסָר׃" + '\n' }, { "end": "10.140", "start": "9.502", "text": "2." + '\n' }, { "end": "10.140", "start": "9.502", "text": "בִּנְאוֹת" }, { "end": "10.648", "start": "10.250 ", "text": "דֶּשֶׁא" }, { "end": "11.769", "start": "10.720 ", "text": "יַרְבִּיצֵנִי" }, { "end": "12.918", "start": "12.418", "text": "עַל־מֵי" }, { "end": "13.800", "start": "13.010", "text": "מְנֻחוֹת" }, { "end": "14.786", "start": "13.940 ", "text": "יְנַהֲלֵנִי׃" + '\n' }, { "end": "16.099", "start": "15.418", "text": "3." + '\n' }, { "end": "16.099", "start": "15.418", "text": "נַפְשִׁי" }, { "end": "16.936", "start": "16.238", "text": " יְשׁוֹבֵב" }, { "end": "18.527", "start": "17.710", "text": "יַנְחֵנִי" }, { "end": "19.650", "start": "18.664 ", "text": "בְמַעְגְּלֵי־ " }, { "end": "20.438", "start": "19.700 ", "text": "צֶדֶק" }, { "end": "21.140", "start": "20.671", "text": "לְמַעַן" }, { "end": "22.000", "start": "21.594 ", "text": "שְׁמוֹ׃" + '\n' }, { "end": "23.457", "start": "22.840", "text": "4." + '\n' }, { "end": "23.457", "start": "22.840", "text": "גַּם" }, { "end": "24.267", "start": "23.573", "text": "כִּי־אֵלֵך" }, { "end": "24.733 ", "start": "24.430", "text": "בְּגֵיא" }, { "end": "25.819 ", "start": "24.838", "text": "צַלְמָוֶת" }, { "end": "27.116", "start": "26.200", "text": "לֹא־אִירָא " }, { "end": "27.729", "start": "27.205", "text": " רָע" }, { "end": "29.130", "start": "28.135 ", "text": "כִּי־אַתָּה" }, { "end": "30.060", "start": "29.326 ", "text": "עִמָּדִי" }, { "end": "31.828", "start": "30.846", "text": "שִׁבְטְךָ" }, { "end": "33.622", "start": "32.000", "text": "וּמִשְׁעַנְתֶּךָ" }, { "end": "34.809", "start": "34.181", "text": "הֵמָּה" }, { "end": "36.196", "start": "35.000", "text": "יְנַחֲמֻנִי׃" + '\n' }, { "end": "38.409 ", "start": "38.000", "text": "5." + '\n' }, { "end": "38.409 ", "start": "38.000", "text": "תַּעֲרֹךְ" }, { "end": "39.229", "start": "38.616 ", "text": "לְפָנַי" }, { "end": "40.092 ", "start": "39.392 ", "text": "שֻׁלְחָן" }, { "end": "40.750", "start": "40.266 ", "text": "נֶגֶד" }, { "end": "41.728", "start": "40.901", "text": "צֹרְרָי" }, { "end": "43.104", "start": "42.228 ", "text": "דִּשַּׁנְתָּ" }, { "end": "44.000", "start": "43.273", "text": "בַשֶּׁמֶן" }, { "end": "45.000", "start": "44.250", "text": "רֹאשִׁי" }, { "end": "46.204", "start": "45.484", "text": "כּוֹסִי" }, { "end": "46.937", "start": "46.349", "text": "רְוָיָה׃" + '\n' }, { "end": "48.000", "start": "47.574 ", "text": "6." + '\n' }, { "end": "48.000", "start": "47.574 ", "text": "אַךְ" }, { "end": "48.598", "start": "48.226", "text": "טוֹב" }, { "end": "49.634", "start": "48.656", "text": "וָחֶסֶד" }, { "end": "51.042 ", "start": "49.770", "text": "יִרְדְּפוּנִי" }, { "end": "51.863", "start": "51.130 ", "text": "כָּל־יְמֵי" }, { "end": "52.640", "start": "52.000", "text": "חַיָּי" }, { "end": "54.000", "start": "53.184 ", "text": "וְשַׁבְתִּי" }, { "end": "55.747", "start": "54.222", "text": "בְּבֵית־יְהוָה" }, { "end": "56.717", "start": "56.000", "text": "לְאֹרֶךְ" }, { "end": "57.524", "start": "56.845", "text": "יָמִים׃" } ]; createSubtitle(); function createSubtitle() { var element; for (var i = 0; i = element.start && audio.currentTime <= element.end) subtitles.children[index].style.color = '#00c8cf'; else subtitles.children[index].style.color = ''; // Reset the color when not highlighted }); }); win.playSoundAndHighlight = function (soundfile) { audio.src = soundfile; audio.currentTime = 0; // Start from the beginning audio.play(); }; }(window, document)); setTimeout(function () { ga('send', 'event', 'load', '15 Seconds'); }, 15000);