☰

Youtube 翻译中文字幕下载 v2

Youtube 播放器右下角有个 Auto-tranlsate，可以把视频字幕翻成中文。这个脚本是下载这个中文字幕

目前為 2018-03-11 提交的版本，檢視 最新版本。

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