Tools and Services Blog Learn Quizzes Smile API Log In / Sign Up
Tools and Services Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated our privacy policy to let you know that we use cookies to personalise content and ads. We also use cookies to analyse our traffic and we share information about your use of our site and application with our advertising and analytics partners. By using this website or our application you agree to our use of cookies. Learn more about the way this website uses cookies or remove this message.

Sync Audio with text using JavaScript

March 9, 2015 Difficulty: 30 / 50 Tweet

A client of mine wanted a way to highlight text on a page as audio was playing, thus helping children that had difficulties reading along. In this tutorial I will show you the solution I implemented.

My client has some complex XML files that contain data about the media files and text, but for the sake of clarity, in this tutorial I will use a much simpler JSON file which basically contains the text from the audio file and markers that define the start and end time of a word or group of words in the audio track.

The code makes use of the timeupdate event and it uses the data from the JSON to sync audio with the text.

I have created a working demo for you guys to have a look at how this works and I am also pasting the code below in case you want to use it in your own projects: Here's the demo!

        <audio id="audiofile" src="//pathtoyouraudiofile.mp3" controls></audio><br>
        <div id="subtitles"></div>
        ( 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 */

            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 + " ";

            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));
comments powered by Disqus