Calculator & Recorder

※2022/05/21 추가: 현재 자막 추출기가 동작하지 않습니다. 자막을 추출할 다른 방법을 찾아보록 하겠습니다.

유튜브 영상의 자막만 빼오고 싶었습니다. StackOverFlow를 뒤지고 구글을 뒤져서 json 형식으로 유튜브 영상 자막을 제공하는 곳을 찾아냈습니다.

완성된 모습

코드 설명

이 코드에 대한 설명을 듣고 싶어하시는 분은 얼마 없겠지만 작성해 봅니다.

function start() {
  let CCText = '';
  let URL = document.getElementById("y-url").value;
  if (URL !== "") {
    let VideoId = youtube_parser(URL)
    if (!VideoId) {
      alert('적절한 유튜브 URL이 아닙니다.') 
    }
    let lang = document.getElementById("lang").value;
    
    let requestURL = `https://video.google.com/timedtext?lang=${lang}&v=${VideoId}&fmt=json3`;
    let request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();
    request.onload = function() {
      let youtubeCC = request.response;
      if (youtubeCC == null) {
        document.querySelector('.output').innerHTML = "<div class='error'><h2>CC Not Found</h2><p>자막이 존재하지 않습니다. 해당 언어로 된 자막이 존재하는지 다시 확인 부탁드립니다.</p></div>";
      } else {
        for (let i = 0; i < youtubeCC["events"].length; i++) {
          if (youtubeCC.events[i]["segs"][0]["utf8"] !== null) {
            CCText += `<p class='cc'>${youtubeCC.events[i]["segs"][0]["utf8"].replace(/\n/ig, '<br>')}</p>`;
          }
        }
        document.querySelector('.output').innerHTML = CCText;
      }
    }
  }
}
function youtube_parser(url){
  var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
  var match = url.match(regExp);
  return (match&&match[1].length==11)? match[1] : false;
}

자바스크립트 부분만 작성하였고, 생각보다 구조는 간단합니다. 유튜브 링크를 받고, 거기서 아이디를 추출합니다. 언어도 ko나 en, ja처럼 언어 코드로 받습니다. 그 다음 유튜브 아이디와 언어로 아래 링크에서 자막을 추출합니다.

let requestURL = `https://video.google.com/timedtext?lang=${lang}&v=${VideoId}&fmt=json3`;

다음 MDN 문서를 참고해서 json 파일을 youtubeCC 변수에 저장합니다. 그 다음부턴 json의 구조를 파악한 후 events 안에 있는 자막 텍스트를 하나하나 가져옵니다. 그런 다음 데이터를 모아서 innerHTML로 출력하면 끝납니다.