javascript to read the audio time

Solutions on MaxInterview for javascript to read the audio time by the best coders in the world

showing results for - "javascript to read the audio time"
Nicolò
31 Jan 2018
1    
2        <audio id="audiofile" src="//pathtoyouraudiofile.mp3" controls></audio><br>
3        <div id="subtitles"></div>
4        <script>
5        ( function(win, doc) {
6            var audioPlayer = doc.getElementById("audiofile");
7            var subtitles = doc.getElementById("subtitles");
8            var syncData = [
9                  { "end": "0.225","start": "0.125","text": "There" },
10                  {"end": "0.485","start": "0.225","text": "were" },
11                  /* ... and so on ... full json is in the demo */
12                ];
13            createSubtitle();
14
15            function createSubtitle()
16            {
17                var element;
18                for (var i = 0; i < syncData.length; i++) {
19                    element = doc.createElement('span');
20                    element.setAttribute("id", "c_" + i);
21                    element.innerText = syncData[i].text + " ";
22                    subtitles.appendChild(element);
23                }
24            }
25
26            audioPlayer.addEventListener("timeupdate", function(e){
27                syncData.forEach(function(element, index, array){
28                    if( audioPlayer.currentTime >= element.start && audioPlayer.currentTime <= element.end )
29                        subtitles.children[index].style.background = 'yellow';
30                });
31            });
32        }(window, document));
33        </script>
34    
35