Youtube Subtitle Downloader v16

v16 support both automatic and closed subtitle
目前為 2018-05-15 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name           Youtube Subtitle Downloader v16
// @include        https://*youtube.com/*
// @author         Cheng Zheng
// @copyright      2009 Tim Smart; 2011 gw111zz; 2014~2018 Cheng Zheng;
// @license        GNU GPL v3.0 or later. http://www.gnu.org/copyleft/gpl.html
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @version        16
// @grant GM_xmlhttpRequest
// @namespace https://greasyfork.org/users/5711
// @description  v16 support both automatic and closed subtitle
// ==/UserScript==

/*
  [What is this?]
  This "Tampermonkey script" allow you download Youtube "Automatic subtitle" AND "closed subtitle"
  
  [Note]
  If not working(rarely), Refresh!!
  if problem still exist. Email me: [email protected]

  [Who build this]
  Author :  Cheng Zheng
  Email  :  [email protected]
  Github :  https://github.com/1c7/Youtube-Auto-Subtitle-Download
  If you want improve the script, Github Pull Request are welcome

  [Note]
  Few things before you read the code: 
  0. Some code comments are written in Chinese
  1. Youtube have 2 UI: Material design and The old design 
  2. Code need handle both Auto & Closed subtitle

  (Explain: "Tampermonkey script" mean 
  you have to install a Chrome extension call "Tampermonkey", and then install this script)

  [Test Video]
  https://www.youtube.com/watch?v=bkVsus8Ehxs
  only have English closed subtitle, nothing else (no auto subtitle)

  https://www.youtube.com/watch?v=-WEqFzyrbbs
  no subtitle at all

  https://www.youtube.com/watch?v=9AzNEG1GB-k
  have a lot subtitle 

  [Code Explain]
  mainly three part
    1. UI specific (add button on page etc)
    2. detech if subtitle exists
    3. transform subtitle format & download
*/

// text for display
var NO_SUBTITLE = 'No subtitle';
var HAVE_SUBTITLE = 'Download subtitle';

// initialize
var first_load = true; // indicate if first load this webpage or not
var youtube_playerResponse_1c7 = null; // for auto subtitle
unsafeWindow.caption_array = []; // store all subtitle

// trigger when first load
$(document).ready(function(){
    start();
});

// Explain this function: we repeatly try if certain HTML element exist, 
// if it does, we call init()
// if it doesn't, stop trying after certain time
function start(){
    var retry_count = 0;
    var RETRY_LIMIT = 20;
    // use "setInterval" is because "$(document).ready()" still not enough, still too early
    // 330 work for me.
    if (new_material_design_version()) {
        var material_checkExist = setInterval(function () {
            if (document.querySelectorAll('.title.style-scope.ytd-video-primary-info-renderer').length) {
                init();
                clearInterval(material_checkExist);
            }
            retry_count = retry_count + 1;
            if (retry_count <= RETRY_LIMIT) {
                clearInterval(material_checkExist);
            }
        }, 330);
    } else {
        var checkExist = setInterval(function () {
            if ($('#watch7-headline').length) {
                init();
                clearInterval(checkExist);
            }
            retry_count = retry_count + 1;
            if (retry_count <= RETRY_LIMIT) {
                clearInterval(checkExist);
            }
        }, 330);
    }
}

// trigger when loading new page 
// (actually this would also trigger when first loading, that's not what we want, that's why we need to use firsr_load === false)
// (new Material design version would trigger this "yt-navigate-finish" event. old version would not.)
var body = document.getElementsByTagName("body")[0];
body.addEventListener("yt-navigate-finish", function(event) {
    if (current_page_is_video_page() === false) {
        return;
    }
    youtube_playerResponse_1c7 = event.detail.response.playerResponse; // for auto subtitle
    unsafeWindow.caption_array = []; // clean up (important, otherwise would have more and more item and cause error)

    // if use click to another page, init again to get correct subtitle
    if(first_load === false){
        remove_subtitle_download_button();
        init();
    }
});

// trigger when loading new page
// (old version would trigger "spfdone" event. new Material design version not sure yet.)
window.addEventListener("spfdone", function(e) {
    if(current_page_is_video_page()){
        remove_subtitle_download_button();
        var checkExist = setInterval(function() {
            if ($('#watch7-headline').length) {
                init();
                clearInterval(checkExist);
            }
        }, 330);
    }
});

// return true / false
// Detect [new version UI(material design)] OR [old version UI]
// I tested this, accurated.
function new_material_design_version() {
    var old_title_element = document.getElementById('watch7-headline');
    if (old_title_element) {
        return false;
    } else {
        return true;
    }
}

// return true / false
function current_page_is_video_page(){
    return get_video_id() !== null;
}

// return string like "RW1ChiWyiZQ",  from "https://www.youtube.com/watch?v=RW1ChiWyiZQ"
// or null
function get_video_id(){
    return getURLParameter('v');
}

//https://stackoverflow.com/questions/11582512/how-to-get-url-parameters-with-javascript/11582513#11582513
function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}

function remove_subtitle_download_button(){
    $('#youtube-subtitle-downloader-by-1c7').remove();
}

function init(){
    inject_our_script();
    first_load = false;
}

function inject_our_script(){
    var div      = document.createElement('div'),
        select   = document.createElement('select'),
        option   = document.createElement('option'),
        controls = document.getElementById('watch7-headline');  // Youtube video title DIV

    div.setAttribute('style', `display: table; 
        margin-top:4px;
        border: 1px solid rgb(0, 183, 90); 
        cursor: pointer; color: rgb(255, 255, 255); 
        border-top-left-radius: 3px; 
        border-top-right-radius: 3px; 
        border-bottom-right-radius: 3px; 
        border-bottom-left-radius: 3px; 
        background-color: #00B75A;
    `);

    div.id = 'youtube-subtitle-downloader-by-1c7';
    div.title = 'Youtube Subtitle Download v16'; // display when cursor hover

    select.id = 'captions_selector';
    select.disabled = true;
    select.setAttribute( 'style', `display:block; 
        border: 1px solid rgb(0, 183, 90); 
        cursor: pointer; 
        color: rgb(255, 255, 255); 
        background-color: #00B75A;
        padding: 4px;
    `);

    option.textContent = 'Loading...';
    option.selected    = true;
    select.appendChild(option);

    // 下拉菜单里，选择一项后触发下载
    select.addEventListener('change', function() {
        download_subtitle(this);
    }, false);

    div.appendChild(select); // put <select> into <div>

    // put the div into page: new material design
    var title_element = document.querySelectorAll('.title.style-scope.ytd-video-primary-info-renderer');
    if (title_element){
        $(title_element[0]).after(div);
    }
    // put the div into page: old version
    if(controls){
        controls.appendChild(div);
    }

    load_language_list(select);

    // <a> element is for download
    var a = document.createElement('a');
    a.style.cssText = 'display:none;';
    a.setAttribute("id", "ForSubtitleDownload");
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(a);
}

// trigger when user select <option>
function download_subtitle(selector) {
    // if user select first <option>
    // we just return, do nothing.
    if (selector.selectedIndex == 0){
        return;
    }

    var caption = caption_array[selector.selectedIndex - 1];
    // because first <option> is for display
    // so index - 1 

    // if user choose auto subtitle
    if (caption.lang_code == 'AUTO'){
        get_auto_subtitle(function(r){
            if (r != false) {
                var srt = parse_youtube_XML_to_SRT(r);
                var title = get_file_name('auto');
                downloadFile(title, srt);
            }
        });
    } else { 
        // closed subtitle
        var lang_code = caption.lang_code;
        var lang_name = caption.lang_name;
        get_closed_subtitle(lang_code, function (r) {
            if (r != false) {
                var srt = parse_youtube_XML_to_SRT(r);
                var title = get_file_name(lang_name);
                downloadFile(title, srt);
            }
        });
    }
    // after download, select first <option>
    selector.options[0].selected = true;
}


// Return something like: "(English)How Did Python Become A Data Science Powerhouse?.srt"
function get_file_name(x){
    return '(' + x + ')' + document.title + '.srt';
}

// detect if "auto subtitle" and "closed subtitle" exist
// and add <option> into <select>
function load_language_list(select) {
    // auto
    var auto_subtitle_exist = false;

    // closed
    var closed_subtitle_exist = false;
    var captions = null;

    // get auto subtitle
    var auto_subtitle_url = get_auto_subtitle_xml_url();
    if (auto_subtitle_url != false) {
        auto_subtitle_exist = true;
    }

    // get closed subtitle
    var list_url = 'https://video.google.com/timedtext?hl=en&v=' + get_video_id() + '&type=list';
    // Example: https://video.google.com/timedtext?hl=en&v=if36bqHypqk&type=list
    GM_xmlhttpRequest({
        method: 'GET',
        url: list_url,
        onload: function( xhr ) {
            captions = new DOMParser().parseFromString(xhr.responseText, "text/xml").getElementsByTagName('track');
            if (captions.length != 0) {
                closed_subtitle_exist = true;
            }

            // if no subtitle at all, just say no and stop
            if (auto_subtitle_exist == false && closed_subtitle_exist == false) {
                select.options[0].textContent = NO_SUBTITLE;
                disable_download_button();
                return false;
            }

            // if at least one type of subtitle exist
            select.options[0].textContent = HAVE_SUBTITLE;
            select.disabled = false;

            var caption = null; // for inside loop
            var option = null;  // for <option>
            var caption_info = null; // for our custom object

            // if auto subtitle exist
            if (auto_subtitle_exist) {
                caption_info = {
                    lang_code: 'AUTO', // later we use this to know if it's auto subtitle
                    lang_name: get_auto_subtitle_name() // for display only
                };
                caption_array.push(caption_info);

                option = document.createElement('option');
                option.textContent = caption_info.lang_name;
                select.appendChild(option);
            }

            // if closed_subtitle_exist
            if (closed_subtitle_exist) {
                for (var i = 0, il = captions.length; i < il; i++) {
                    caption = captions[i];
                    caption_info = {
                        lang_code: caption.getAttribute('lang_code'), // for AJAX request
                        lang_name: caption.getAttribute('lang_translated') // for display only
                    };
                    caption_array.push(caption_info);
                    // 注意这里是加到 caption_array, 一个全局变量, 待会要靠它来下载
                    option = document.createElement('option');
                    option.textContent = caption_info.lang_name;
                    select.appendChild(option);
                }
            }
        }
    });
}

function disable_download_button(){
    $('#youtube-subtitle-downloader-by-1c7')
        .css('border', '#95a5a6')
        .css('cursor', 'not-allowed')
        .css('background-color', '#95a5a6');
    $('#captions_selector')
        .css('border', '#95a5a6')
        .css('cursor', 'not-allowed')
        .css('background-color', '#95a5a6');

    if (new_material_design_version()) {
        $('#youtube-subtitle-downloader-by-1c7').css('padding', '6px');
    } else {
        $('#youtube-subtitle-downloader-by-1c7').css('padding', '5px');
    }
}

// 处理时间. 比如 start="671.33"  start="37.64"  start="12" start="23.029"
// 处理成 srt 时间, 比如 00:00:00,090    00:00:08,460    00:10:29,350
function process_time(s){
    s = s.toFixed(3);
    // 超棒的函数, 不论是整数还是小数都给弄成3位小数形式
    // 举个柚子:
    // 671.33 -> 671.330
    // 671 -> 671.000
    // 注意函数会四舍五入. 具体读文档

    var array = s.split('.');
    // 把开始时间根据句号分割
    // 671.330 会分割成数组: [671, 330]

    var Hour = 0;
    var Minute = 0;
    var Second = array[0];   // 671
    var MilliSecond = array[1];  // 330
    // 先声明下变量, 待会把这几个拼好就行了

    // 我们来处理秒数.  把"分钟"和"小时"除出来
    if(Second >= 60){
        Minute = Math.floor(Second / 60);
        Second = Second - Minute * 60;
        // 把 秒 拆成 分钟和秒, 比如121秒, 拆成2分钟1秒

        Hour = Math.floor(Minute / 60);
        Minute = Minute - Hour * 60;
        // 把 分钟 拆成 小时和分钟, 比如700分钟, 拆成11小时40分钟
    }
    // 分钟，如果位数不够两位就变成两位，下面两个if语句的作用也是一样。
    if (Minute < 10){
        Minute = '0' + Minute;
    }
    // 小时
    if (Hour < 10){
        Hour = '0' + Hour;
    }
    // 秒
    if (Second < 10){
        Second = '0' + Second;
    }
    return Hour + ':' + Minute + ':' + Second + ',' + MilliSecond;
}

function downloadFile(fileName, content){
    // dummy element for download
    if ($('#youtube-subtitle-downloader-dummy-element-for-download').length > 0) {
    }else{
        $("body").append('<a id="youtube-subtitle-downloader-dummy-element-for-download"></a>');
    }
    var dummy = $('#youtube-subtitle-downloader-dummy-element-for-download');
    dummy.attr('download', fileName);
    dummy.attr('href','data:Content-type: text/plain,' + htmlDecode(content));
    dummy[0].click();
}

// https://css-tricks.com/snippets/javascript/unescape-html-in-js/
// turn HTML entity back to text, example: &quot; should be "
function htmlDecode(input){
    var e = document.createElement('div');
    e.class = 'dummy-element-for-tampermonkey-Youtube-Subtitle-Downloader-script-to-decode-html-entity';
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

// return URL or null;
// later we can send a AJAX and get XML subtitle
function get_auto_subtitle_xml_url() {
    try {
        // get JSON
        var json = '';
        if (typeof youtube_playerResponse_1c7 !== "undefined" && youtube_playerResponse_1c7 !== null && youtube_playerResponse_1c7 !== '') {
            json = youtube_playerResponse_1c7;
        } else {
            var raw_string = ytplayer.config.args.player_response;
            json = JSON.parse(raw_string);
        }

        // get data from JSON
        var captionTracks = json.captions.playerCaptionsTracklistRenderer.captionTracks;
        for (var index in captionTracks) {
            var caption = captionTracks[index];
            if (typeof caption.kind === 'string' && caption.kind == 'asr') {
                return captionTracks[index].baseUrl;
            }
            // ASR – A caption track generated using automatic speech recognition.
            // https://developers.google.com/youtube/v3/docs/captions
        }
    } catch (error) {
        return false;
    }
}

function get_auto_subtitle(callback) {
    var url = get_auto_subtitle_xml_url();
    get_from_url(url, callback);
}

function get_closed_subtitle(lang_code, callback) {
    var url = 'https://video.google.com/timedtext?hl=' + lang_code + '&lang=' + lang_code + '&v=' + get_video_id();
    // example: https://video.google.com/timedtext?hl=en&lang=en&v=FWuwq8HTLQo
    get_from_url(url, callback);
}

function get_from_url(url, callback) {
    $.ajax({
        url: url,
        type: 'get',
        success: function (r) {
            callback(r);
        },
        fail: function (error) {
            callback(false);
        }
    });
}

// Youtube return XML. we want SRT  
// input: Youtube XML format
// output: SRT format
function parse_youtube_XML_to_SRT(youtube_xml_string) {
    if (youtube_xml_string === '') {
        return false;
    }
    var text = youtube_xml_string.getElementsByTagName('text');
    var result = '';
    var BOM = '\uFEFF';
    result = BOM + result; // store final SRT result
    var len = text.length;
    for (var i = 0; i < len; i++) {
        var index = i + 1;
        var content = text[i].textContent.toString();
        content = content.replace(/(<([^>]+)>)/ig, ""); // remove all html tag.
        var start = text[i].getAttribute('start');
        var end = '';

        if (i + 1 >= len) {
            end = parseFloat(text[i].getAttribute('start')) + parseFloat(text[i].getAttribute('dur'));
        } else {
            end = text[i + 1].getAttribute('start');
        }

        // we want SRT format:
        /*
            1
            00:00:01,939 --> 00:00:04,350
            everybody Craig Adams here I'm a

            2
            00:00:04,350 --> 00:00:06,720
            filmmaker on YouTube who's digging
        */
        var new_line = "%0D%0A";
        result = result + index + new_line;
        // 1

        var start_time = process_time(parseFloat(start));
        var end_time = process_time(parseFloat(end));
        result = result + start_time;
        result = result + ' --> ';
        result = result + end_time + new_line;
        // 00:00:01,939 --> 00:00:04,350

        result = result + content + new_line + new_line;
        // everybody Craig Adams here I'm a
    }
    return result;
}

// return "English (auto-generated)" or a default name;
function get_auto_subtitle_name(){
    try {
        var raw_string = ytplayer.config.args.player_response;
        var json = JSON.parse(raw_string);

        if (typeof json.captions !== "undefined") {
            var captionTracks = json.captions.playerCaptionsTracklistRenderer.captionTracks;
            for (var index in captionTracks) {
                var caption = captionTracks[index];
                if (typeof caption.kind === 'string' && caption.kind == 'asr') {
                    return captionTracks[index].name.simpleText;
                }
            }
        }
    } catch (error) {
        return 'Auto Subtitle';
    }
}