☰

Youtube Subtitle Downloader v14

download youtube COMPLETE subtitle (v14 fixed timeline)

当前为 2018-02-14 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name           Youtube Subtitle Downloader v14
  3. // @include        https://*youtube.com/*
  4. // @author         Cheng Zheng
  5. // @copyright      2009 Tim Smart; 2011 gw111zz; 2013~2018 Cheng Zheng;
  6. // @license        GNU GPL v3.0 or later. http://www.gnu.org/copyleft/gpl.html
  7. // @require        http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
  8. // @version        14
  9. // @grant GM_xmlhttpRequest
  10. // @namespace https://greasyfork.org/users/5711
  11. // @description download youtube COMPLETE subtitle (v14 fixed timeline)
  12. // ==/UserScript==
  13.  
  14. /*
  15.   Sometime it may not work(rarely), TRY Refresh. if problem still exist. Email me at guokrfans@gmail.com
  16.  
  17.   Author :  Cheng Zheng
  18.   Email  :  guokrfans@gmail.com
  19.   Github :  https://github.com/1c7/Youtube-Auto-Subtitle-Download
  20.  
  21.   Some code comments are in Chinese.
  22. */
  23.  
  24. // CONFIG
  25. var NO_SUBTITLE = 'No captions.';
  26. var HAVE_SUBTITLE = 'Download captions.';
  27. var first_load = true;
  28.  
  29. // return true / false
  30. // Detect [new version UI(material design)] OR [old version UI]
  31. // I tested this, accurated.
  32. function new_material_design_version(){
  33.     var old_title_element = document.getElementById('watch7-headline');
  34.     if(old_title_element){
  35.         return false;
  36.     } else {
  37.         return true;
  38.     }
  39. }
  40.  
  41. // trigger when first load (hit refresh button)
  42. $(document).ready(function(){
  43.     // because document ready still not enough
  44.     // it's still too early, we have to wait certain element exist, then execute function.
  45.     if(new_material_design_version()){
  46.         var material_checkExist = setInterval(function() {
  47.             if (document.querySelectorAll('.title.style-scope.ytd-video-primary-info-renderer').length) {
  48.                 init();
  49.                 clearInterval(material_checkExist);
  50.             }
  51.         }, 330);
  52.     } else {
  53.         var checkExist = setInterval(function() {
  54.             if ($('#watch7-headline').length) {
  55.                 init();
  56.                 clearInterval(checkExist);
  57.             }
  58.         }, 330);
  59.     }
  60.  
  61. });
  62.  
  63. // 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)
  64. // (new Material design version would trigger this "yt-navigate-finish" event. old version would not.)
  65. var body = document.getElementsByTagName("body")[0];
  66. body.addEventListener("yt-navigate-finish", function(event) {
  67.     if(first_load === false){
  68.         remove_subtitle_download_button();
  69.         init();
  70.     }
  71. });
  72.  
  73. // trigger when loading new page
  74. // (old version would trigger this "spfdone" event. new Material design version not sure yet.)
  75. window.addEventListener("spfdone", function(e) {
  76.     if(current_page_is_video_page()){
  77.         remove_subtitle_download_button();
  78.         var checkExist = setInterval(function() {
  79.             if ($('#watch7-headline').length) {
  80.                 init();
  81.                 clearInterval(checkExist);
  82.             }
  83.         }, 330);
  84.     }
  85.  
  86. });
  87.  
  88. // return true / false
  89. function current_page_is_video_page(){
  90.     return get_video_id() !== null;
  91. }
  92.  
  93. // return string like "RW1ChiWyiZQ",  from "https://www.youtube.com/watch?v=RW1ChiWyiZQ"
  94. // or null
  95. function get_video_id(){
  96.     return getURLParameter('v');
  97. }
  98.  
  99. //https://stackoverflow.com/questions/11582512/how-to-get-url-parameters-with-javascript/11582513#11582513
  100. function getURLParameter(name) {
  101.     return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
  102. }
  103.  
  104. function remove_subtitle_download_button(){
  105.     $('#youtube-subtitle-downloader-by-1c7').remove();
  106. }
  107.  
  108. function init(){
  109.     unsafeWindow.caption_array = [];
  110.     inject_our_script();
  111.     first_load = false;
  112. }
  113.  
  114. function inject_our_script(){
  115.     var div      = document.createElement('div'),
  116.         select   = document.createElement('select'),
  117.         option   = document.createElement('option'),
  118.         controls = document.getElementById('watch7-headline');  // Youtube video title DIV
  119.  
  120.     if (new_material_design_version()){
  121.         div.setAttribute('style', `display: table; 
  122. margin-top:4px;
  123. border: 1px solid rgb(0, 183, 90); 
  124. cursor: pointer; color: rgb(255, 255, 255); 
  125. border-top-left-radius: 3px; 
  126. border-top-right-radius: 3px; 
  127. border-bottom-right-radius: 3px; 
  128. border-bottom-left-radius: 3px; 
  129. background-color: #00B75A; 
  130. padding: 4px;
  131. padding-right: 8px;
  132. `);
  133.     } else {
  134.         div.setAttribute('style', `display: table; 
  135. margin-top:4px;
  136. border: 1px solid rgb(0, 183, 90); 
  137. cursor: pointer; color: rgb(255, 255, 255); 
  138. border-top-left-radius: 3px; 
  139. border-top-right-radius: 3px; 
  140. border-bottom-right-radius: 3px; 
  141. border-bottom-left-radius: 3px; 
  142. background-color: #00B75A; 
  143. padding: 3px;
  144. padding-right: 8px;
  145. `);
  146.     }
  147.  
  148.     div.id = 'youtube-subtitle-downloader-by-1c7';
  149.  
  150.     select.id       = 'captions_selector';
  151.     select.disabled = true;
  152.     select.setAttribute( 'style', 'display:block; border: 1px solid rgb(0, 183, 90); cursor: pointer; color: rgb(255, 255, 255); background-color: #00B75A;');
  153.  
  154.     option.textContent = 'Loading...';
  155.     option.selected    = true;
  156.     select.appendChild(option);
  157.  
  158.     select.addEventListener('change', function() {
  159.         download_subtitle(this);
  160.     }, false);
  161.  
  162.     div.appendChild(select);
  163.     // put <select> into <div>
  164.  
  165.     // put the div into page: new material design
  166.     var title_element = document.querySelectorAll('.title.style-scope.ytd-video-primary-info-renderer');
  167.     if (title_element){
  168.         $(title_element[0]).after(div);
  169.     }
  170.     // put the div into page: old version
  171.     if(controls){
  172.         controls.appendChild(div);
  173.     }
  174.  
  175.     load_language_list(select);
  176.  
  177.     // <a> element is for download
  178.     var a = document.createElement('a');
  179.     a.style.cssText = 'display:none;';
  180.     a.setAttribute("id", "ForSubtitleDownload");
  181.     var body = document.getElementsByTagName('body')[0];
  182.     body.appendChild(a);
  183. }
  184.  
  185. function download_subtitle(selector) {
  186.     var caption = caption_array[selector.selectedIndex - 1];
  187.     if (!caption) return;
  188.     var language_name_1c7 = caption.lang_name;
  189.  
  190.     var url = 'https://video.google.com/timedtext?hl=' + caption.lang_code + '&lang=' + caption.lang_code + '&name=' + caption.name + '&v=' + get_video_id();
  191.     console.log("Youtube Subtitle Downloader: subtitlr URL is ");
  192.     console.log(url);
  193.     // example: https://video.google.com/timedtext?hl=en&lang=en&name=&v=FWuwq8HTLQo
  194.     jQuery.get(url).done(function(r){
  195.         // format should look like this: (2018-2-10)
  196.         // youtube change their format from time to time. I already change my code to fit their new format twice
  197.         /*
  198.     <transcript>
  199. <text start="54" dur="3">My name is Derpy Hooves</text>
  200. <text start="57" dur="3">I am a simple pegasus pony from Ponyville</text>
  201. <text start="65" dur="5">
  202. However, there is something about me that you must know
  203. </text>
  204. <text start="78" dur="5">
  205. I have strabismus, meaning that my eyes are not properly aligned with each others
  206. </text>
  207. <text start="113" dur="2">My problem was neurological</text>
  208. <text start="115" dur="3">
  209. The doctors couldn&#39;t do anything to ... correct the problem
  210. </text>
  211. <text start="122" dur="3">It&#39;s not only with my vision</text>
  212. <text start="125" dur="3">It&#39;s also affecting the front of my body</text>
  213. <text start="128" dur="2">Giving me my &quot;Derpy Hooves&quot;</text>
  214. <text start="130" dur="5">
  215. My clumsiness is so important it was represented by my cutie mark
  216. </text>
  217. <text start="135" dur="4">Seven bubbles representing luck and fragility</text>
  218. <text start="139" dur="2">They joked about the way I acted</text>
  219. <text start="141" dur="4">Saying that I was just stupid and silly</text>
  220. <text start="145" dur="2">This was not my fault</text>
  221. <text start="147" dur="3">
  222. This was the way I was and I couldn&#39;t do anything about it
  223. </text>
  224. <text start="158" dur="2">I wished to get my body fixed</text>
  225. <text start="160" dur="2">Later I realised this was not what I really wanted</text>
  226. <text start="162" dur="3">I wanted respect, and I had to earn it by mysel</text>
  227. <text start="196" dur="4">
  228. Despite being a great flyer raised by a former Wonderbolts member
  229. </text>
  230. <text start="200" dur="2">I couldn&#39;t join them because</text>
  231. <text start="202" dur="2">They didn&#39;t trust my impaired vision</text>
  232. <text start="213" dur="2">Instead, I used my silly eyes as an advantage</text>
  233. <text start="215" dur="3">And became one of the best mailmares in Ponyville</text>
  234. <text start="260" dur="3">
  235. I know I will have to live with this for the rest of my life
  236. </text>
  237. <text start="263" dur="2">But I don&#39;t really mind anymore</text>
  238. <text start="265" dur="4">
  239. My best memories are the voices of my friends and my familly, I don&#39;t need perfect vision to be happy
  240. </text>
  241. <text start="273" dur="3">I might be unable to walk correctly either</text>
  242. <text start="276" dur="2">But I still got my wings, and I will live with it</text>
  243. <text start="327" dur="4">
  244. And I won&#39;t allow you to blind those who are important to me
  245. </text>
  246. </transcript>
  247.  
  248.  
  249.  
  250. sometime it's different:
  251. https://video.google.com/timedtext?hl=en&lang=en&name=&v=a8uyilHatBA
  252. <transcript>
  253. <text start="0.07" dur="3.569">
  254. About a year ago, Elon Musk was sitting in traffic in Los Angeles, and thought about
  255. </text>
  256. <text start="3.639" dur="2.971">
  257. how cool it would be if he built a tunnel under the city.
  258. </text>
  259. <text start="6.61" dur="1.21">So he built a tunnel under the city.</text>
  260. <text start="7.82" dur="2.279">And he started selling hats for his tunnel.</text>
  261. <text start="10.099" dur="3.931">
  262. 50,000 hats later, he got bored with hats, and switched the hats out for flamethrowers.
  263. </text>
  264. <text start="14.03" dur="3.999">
  265. He sold 20,000 of those, and then five days later he tied his car up to the most powerful
  266. </text>
  267. <text start="18.029" dur="3.431">rocket ever made, and shot it into fuckin space.</text>
  268. <text start="23.1" dur="2.44">And then the rocket fuckin landed itself.</text>
  269. </transcript>
  270.     */
  271.         var text = r.getElementsByTagName('text');
  272.         // 拿所有 text 节点
  273.         var result = "";
  274.         var BOM = "\uFEFF";
  275.         result = BOM + result;
  276.         // 保存结果的字符串
  277.         for(var i=0; i<text.length; i++){
  278.             var index = i+1;
  279.             // 这个是字幕的索引, 从1开始的, 但是因为我们的循环是从0开始的, 所以加个1
  280.             var content = text[i].textContent.replace(/\n/g, " ");
  281.             // content 保存的是字幕内容 - 这里把换行换成了空格, 因为 Youtube 显示的多行字幕中间会有个\n, 如果不加这个replace. 两行的内容就会黏在一起.
  282.             var start = parseFloat(text[i].getAttribute('start'));
  283.             var end = start + parseFloat(text[i].getAttribute('dur'));
  284.             if(!end){
  285.                 end = start + 5;
  286.             }
  287.             // ==== 开始处理数据, 把数据保存到result里. ====
  288.             result = result + index + escape('\r\n');
  289.             // 把序号加进去
  290.             var start_time = process_time( parseFloat(start) );
  291.             result = result + start_time;
  292.             // 拿到 开始时间 之后往result字符串里存一下
  293.             result = result + ' --> ';
  294.             // 标准srt时间轴: 00:00:01,850 --> 00:00:02,720
  295.             // 我们现在加个中间的箭头..
  296.             var end_time = process_time( parseFloat(end) );
  297.             result = result + end_time + escape('\r\n');
  298.             // 拿到 结束时间 之后往result字符串里存一下
  299.             result = result + content + escape('\r\n\r\n');
  300.             // 加字幕内容
  301.         }
  302.         var title = get_file_name(language_name_1c7);
  303.         downloadFile(title, result);
  304.         // 下载
  305.  
  306.     }).fail(function() {
  307.         alert("Error: No response from server.");
  308.     });
  309.  
  310.     selector.options[0].selected = true;
  311.     // 下载后把 <select> 选回第一个元素. 也就是 Download captions.
  312. }
  313.  
  314.  
  315. // Return something like: "(English)How Did Python Become A Data Science Powerhouse?.srt"
  316. function get_file_name(language_name){
  317.     if(new_material_design_version()){
  318.         var title_element = document.querySelectorAll('.title.style-scope.ytd-video-primary-info-renderer');
  319.         var video_name = title_element[0].childNodes[0].data;
  320.         return '(' + language_name + ')' + video_name + '.srt';
  321.     } else {
  322.         return '(' + language_name + ')' + unsafeWindow.ytplayer.config.args.title + '.srt';
  323.     }
  324. }
  325.  
  326. // 载入有多少种语言, 然后加到 <select> 里
  327. function load_language_list (select) {
  328.     GM_xmlhttpRequest({
  329.         method: 'GET',
  330.         url:    'https://video.google.com/timedtext?hl=en&v=' + get_video_id() + '&type=list',
  331.         onload: function( xhr ) {
  332.             var caption, option, caption_info,
  333.                 captions = new DOMParser().parseFromString(xhr.responseText, "text/xml").getElementsByTagName('track');
  334.             if (captions.length === 0) {
  335.                 select.options[0].textContent = NO_SUBTITLE;
  336.  
  337.                 if (new_material_design_version()){
  338.                     $('#youtube-subtitle-downloader-by-1c7').css('border', '#95a5a6').css('cursor', 'not-allowed').css('background-color','#95a5a6').css('padding','6px');
  339.                     $('#captions_selector').css('border', '#95a5a6').css('cursor', 'not-allowed').css('background-color','#95a5a6');
  340.  
  341.                 } else {
  342.                     $('#youtube-subtitle-downloader-by-1c7').css('border', '#95a5a6').css('cursor', 'not-allowed').css('background-color','#95a5a6').css('padding','5px');
  343.                     $('#captions_selector').css('border', '#95a5a6').css('cursor', 'not-allowed').css('background-color','#95a5a6');
  344.                 }
  345.  
  346.                 return false;
  347.             }
  348.             for (var i = 0, il = captions.length; i < il; i++) {
  349.                 caption      = captions[i];
  350.                 option       = document.createElement('option');
  351.                 caption_info = {
  352.                     name:      caption.getAttribute('name'),
  353.                     lang_code: caption.getAttribute('lang_code'),
  354.                     lang_name: caption.getAttribute('lang_translated')
  355.                 };
  356.                 caption_array.push(caption_info);
  357.                 // 注意这里是加到 caption_array, 一个全局变量, 我们待会要依靠它来下载.
  358.                 option.textContent = caption_info.lang_name;
  359.                 select.appendChild(option);
  360.             }
  361.             select.options[0].textContent = HAVE_SUBTITLE;
  362.             select.disabled               = false;
  363.         }
  364.     });
  365. }
  366.  
  367. // 处理时间. 比如 start="671.33"  start="37.64"  start="12" start="23.029"
  368. // 处理成 srt 时间, 比如 00:00:00,090    00:00:08,460    00:10:29,350
  369. function process_time(s){
  370.     s = s.toFixed(3);
  371.     // 超棒的函数, 不论是整数还是小数都给弄成3位小数形式
  372.     // 举个柚子:
  373.     // 671.33 -> 671.330
  374.     // 671 -> 671.000
  375.     // 注意函数会四舍五入. 具体读文档
  376.  
  377.     var array = s.split('.');
  378.     // 把开始时间根据句号分割
  379.     // 671.330 会分割成数组: [671, 330]
  380.  
  381.     var Hour = 0;
  382.     var Minute = 0;
  383.     var Second = array[0];   // 671
  384.     var MilliSecond = array[1];  // 330
  385.     // 先声明下变量, 待会把这几个拼好就行了
  386.  
  387.     // 我们来处理秒数.  把"分钟"和"小时"除出来
  388.     if(Second >= 60){
  389.         Minute = Math.floor(Second / 60);
  390.         Second = Second - Minute * 60;
  391.         // 把 秒 拆成 分钟和秒, 比如121秒, 拆成2分钟1秒
  392.  
  393.         Hour = Math.floor(Minute / 60);
  394.         Minute = Minute - Hour * 60;
  395.         // 把 分钟 拆成 小时和分钟, 比如700分钟, 拆成11小时40分钟
  396.     }
  397.     // 分钟，如果位数不够两位就变成两位，下面两个if语句的作用也是一样。
  398.     if (Minute < 10){
  399.         Minute = '0' + Minute;
  400.     }
  401.     // 小时
  402.     if (Hour < 10){
  403.         Hour = '0' + Hour;
  404.     }
  405.     // 秒
  406.     if (Second < 10){
  407.         Second = '0' + Second;
  408.     }
  409.     return Hour + ':' + Minute + ':' + Second + ',' + MilliSecond;
  410. }
  411.  
  412. function downloadFile(fileName, content){
  413.     var TITLE = unsafeWindow.ytplayer.config.args.title; // Video title
  414.     var version = getChromeVersion();
  415.  
  416.     // dummy element for download
  417.     if ($('#youtube-subtitle-downloader-dummy-element-for-download').length > 0) {
  418.     }else{
  419.         $("body").append('<a id="youtube-subtitle-downloader-dummy-element-for-download"></a>');
  420.     }
  421.     var dummy = $('#youtube-subtitle-downloader-dummy-element-for-download');
  422.  
  423.     // 判断 Chrome 版本选择下载方法，Chrome 52 和 53 的文件下载方式不一样
  424.     if (version > 52){
  425.         dummy.attr('download', fileName);
  426.         dummy.attr('href','data:Content-type: text/plain,' + htmlDecode(content));
  427.         dummy[0].click();
  428.     } else {
  429.         downloadViaBlob(fileName, htmlDecode(content));
  430.     }
  431. }
  432.  
  433. // 复制自： http://www.alloyteam.com/2014/01/use-js-file-download/
  434. // Chrome 53 之后这个函数失效。52有效。
  435. function downloadViaBlob(fileName, content){
  436.     var aLink = document.createElement('a');
  437.     var blob = new Blob([content]);
  438.     var evt = document.createEvent("HTMLEvents");
  439.     evt.initEvent("click", false, false);
  440.     aLink.download = fileName;
  441.     aLink.href = URL.createObjectURL(blob);
  442.     aLink.dispatchEvent(evt);
  443. }
  444.  
  445. //http://stackoverflow.com/questions/4900436/how-to-detect-the-installed-chrome-version
  446. function getChromeVersion() {
  447.     var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
  448.     return raw ? parseInt(raw[2], 10) : false;
  449. }
  450.  
  451. // https://css-tricks.com/snippets/javascript/unescape-html-in-js/
  452. // turn HTML entity back to text, example: &quot; should be "
  453. function htmlDecode(input){
  454.     var e = document.createElement('div');
  455.     e.class = 'dummy-element-for-tampermonkey-Youtube-Subtitle-Downloader-script-to-decode-html-entity';
  456.     e.innerHTML = input;
  457.     return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  458. }