Sync Audio with Text Using Javascript

Logic

1. [back] 영상 관련 대본을 vtt 파일 포맷으로 저장

1. webVTT
   - 웹 비디오 텍스트 트랙 형식 (WebVTT)
2. VTT 파일 만드는 법
   - Caption Studio

2. [back] vtt파일을 JSON 형태로 바꾸어 front로 전송

1. vtt-to-json 패키지 활용
   - vtt-json

예시) 

var vttToJson = require("vtt-to-json")
let vtt = `00:01.684 --> 00:02.785 웅이형, 잠깐만요! wait!`
vttToJson(vtt)
	.then((result) => { console.log(result) });

// return
[{start: 1684, end: 2785, part: "웅이형, 잠깐만요!"},
{start: 1684, end: 2785, part: "wait!"}]

 

3. [front] 영상 재생 시 audioSync 모듈을 활용하여 영상의 대화 진행에 맞게 text가 나오고 발음되는 text를 highlight 해야 함.

- Sync Audio with text using JavaScript

var audioSync = function (options) {

    var audioPlayer = document.getElementById(options.audioPlayer);
    var subtitles = document.getElementById(options.subtitlesContainer);
    var syncData = [];
    var rawSubTitle = "";
    var convertVttToJson = require('vtt-json');

    var init = function() {
        return fetch(new Request(options.subtitlesFile))
                .then(response => response.text())
                .then(createSubtitle)
    }();

    function createSubtitle(text)
    {
        var rawSubTitle = text;
        convertVttToJson(text)
        .then((result) => {
            var x = 0;
            for (var i = 0; i < result.length; i++) { //cover for bug in vtt to json here
                if (result[i].part && result[i].part.trim() != '') {
                    syncData[x] = result[i];
                    x++;
                }
            }
        });
    }

    audioPlayer.addEventListener("timeupdate", function(e){
        syncData.forEach(function(element, index, array){
            var el;
            if( (audioPlayer.currentTime*1000) >= element.start && (audioPlayer.currentTime*1000) <= element.end ) {

                while(subtitles.hasChildNodes())
                    subtitles.removeChild(subtitles.firstChild)

                el = document.createElement('span');
                el.setAttribute("id", "c_" + index);
                el.innerText = syncData[index].part + "\\n";
                el.style.background = 'yellow';
                subtitles.appendChild(el);

            }
        });
    });
}

module.exports = audioSync;