javascript to read the audio time code example

Example 1: javascript to read the audio time

javascript to read the audio time

Example 2: javascript to read the audio time

<audio id="audiofile" src="//pathtoyouraudiofile.mp3" controls></audio><br>
        <div id="subtitles"></div>
        <script>
        ( function(win, doc) {
            var audioPlayer = doc.getElementById("audiofile");
            var subtitles = doc.getElementById("subtitles");
            var syncData = [
                  { "end": "0.225","start": "0.125","text": "There" },
                  {"end": "0.485","start": "0.225","text": "were" },
                  /* ... and so on ... full json is in the demo */
                ];
            createSubtitle();

            function createSubtitle()
            {
                var element;
                for (var i = 0; i < syncData.length; i++) {
                    element = doc.createElement('span');
                    element.setAttribute("id", "c_" + i);
                    element.innerText = syncData[i].text + " ";
                    subtitles.appendChild(element);
                }
            }

            audioPlayer.addEventListener("timeupdate", function(e){
                syncData.forEach(function(element, index, array){
                    if( audioPlayer.currentTime >= element.start && audioPlayer.currentTime <= element.end )
                        subtitles.children[index].style.background = 'yellow';
                });
            });
        }(window, document));
        </script>