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>
4.17
6
javascript to read the audio time
Thank you!
6
0
Are there any code examples left?
New code examples in category Html
-
Html 2022-03-27 21:55:05 how to kill html
-
Html 2022-03-27 21:55:02 How to create web urls without extensions
-
Html 2022-03-27 21:45:11 space between 2 h tags without break
-
Html 2022-03-27 21:40:13 how to resize submit button in html
-
Html 2022-03-27 20:40:18 https://www.codegrepper.com
-
Html 2022-03-27 19:55:09 show image inside table with innerhtml
-
Html 2022-03-27 19:30:47 html email input
-
Html 2022-03-27 18:45:01 how to add favicon in html
-
Html 2022-03-27 18:15:21 picture html
-
Html 2022-03-27 18:15:11 ex: javaasdasdasdasd