├── .gitignore
├── README.md
├── package.json
└── audiosync.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /app.js
3 | /index.html
4 | /*.mp4
5 | /*.vtt
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Audio Sync With VTT Subtitles
 2 | 
 3 | ### Installation
 4 | 
 5 | `npm install audio-sync-with-text --save`
 6 | 
 7 | ### Demo
 8 | 
 9 | [CodePunker.com](https://www.codepunker.com/blog/sync-audio-with-text-using-javascript)
10 | 
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "audio-sync-with-text",
 3 |   "version": "1.0.0",
 4 |   "description": "Displays text in sync with audio being played. Works with vtt files.",
 5 |   "main": "audiosync.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/the-codepunker/audio-sync-with-text.git"
12 |   },
13 |   "keywords": [
14 |     "vtt",
15 |     "audio",
16 |     "sync"
17 |   ],
18 |   "author": "The CodePunker",
19 |   "license": "ISC",
20 |   "bugs": {
21 |     "url": "https://github.com/the-codepunker/audio-sync-with-text/issues"
22 |   },
23 |   "homepage": "https://github.com/the-codepunker/audio-sync-with-text#readme",
24 |   "dependencies": {
25 |     "vtt-json": "^1.0.1"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/audiosync.js:
--------------------------------------------------------------------------------
 1 | var audioSync = function (options) {
 2 | 
 3 |     var audioPlayer = document.getElementById(options.audioPlayer);
 4 |     var subtitles = document.getElementById(options.subtitlesContainer);
 5 |     var syncData = [];
 6 |     var rawSubTitle = "";
 7 |     var convertVttToJson = require('vtt-json');
 8 | 
 9 |     var init = function() {
10 |         return fetch(new Request(options.subtitlesFile))
11 |                 .then(response => response.text())
12 |                 .then(createSubtitle)
13 |     }();
14 | 
15 |     function createSubtitle(text)
16 |     {
17 |         var rawSubTitle = text;
18 |         convertVttToJson(text)
19 |         .then((result) => {
20 |             var x = 0;
21 |             for (var i = 0; i < result.length; i++) { //cover for bug in vtt to json here
22 |                 if (result[i].part && result[i].part.trim() != '') {
23 |                     syncData[x] = result[i];
24 |                     x++;
25 |                 }
26 |             }
27 |         });
28 |     }
29 | 
30 |     audioPlayer.addEventListener("timeupdate", function(e){
31 |         syncData.forEach(function(element, index, array){
32 |             var el;
33 |             if( (audioPlayer.currentTime*1000) >= element.start && (audioPlayer.currentTime*1000) <= element.end ) {
34 | 
35 |                 while(subtitles.hasChildNodes())
36 |                     subtitles.removeChild(subtitles.firstChild)
37 | 
38 |                 el = document.createElement('span');
39 |                 el.setAttribute("id", "c_" + index);
40 |                 el.innerText = syncData[index].part + "\n";
41 |                 el.style.background = 'yellow';
42 |                 subtitles.appendChild(el);
43 | 
44 | 
45 |             }
46 |         });
47 |     });
48 | }
49 | 
50 | module.exports = audioSync;
51 | 


--------------------------------------------------------------------------------