字幕脚本是什么_自动刷弹幕脚本

油猴脚本模块

• 油猴脚本（Tampermonkey Script）通常由以下几个模块组成：

元信息注释：

• 这一部分包含了脚本的基本信息，如名称、版本、描述、作者等。

// ==UserScript== // @name 脚本名称 // @namespace 命名空间 // @version 版本号 // @description 描述脚本功能 // @author 作者 // @match 匹配的页面地址 // @grant 需要的权限 https://www.tampermonkey.net/documentation.php#meta:grant // ==/UserScript== 

权限：

• 检测是否有权限的例子

if (!GM_xmlhttpRequest) { 
    alert('请升级到最新版本的 Greasemonkey.'); return; } 

样式定义：

• 使用 GM_addStyle 函数为页面添加一些自定义样式，用于美化页面或调整特定元素的样式

  GM_addStyle(` // 自定义样式的定义 // ... `); 

代码解释

• 这个脚本的功能是在哔哩哔哩（Bilibili）视频页面上显示视频的字幕

元信息注释模块：

// ==UserScript== // @name 在侧边显示 Bilibili 视频字幕/文稿 // @name:en Show transcript of Bilibili video on the side // @version 1.1.1 // @description:en Automatically display Bilibili video subtitles/scripts by default, support click to jump, text selection, auto-scrolling. // @description 默认自动显示Bilibili视频字幕/文稿，支持点击跳转、文本选中、自动滚动。 // @namespace https://bilibili.com/ // @match https://www.bilibili.com/video/* // @icon https://www.bilibili.com/favicon.ico // @author bowencool // @license MIT // @homepageURL https://greasyfork.org/scripts/ // @supportURL https://github.com/bowencool/Tampermonkey-Scripts/issues // @grant GM_addStyle // @downloadURL https://update.greasyfork.org/scripts//%E5%9C%A8%E4%BE%A7%E8%BE%B9%E6%98%BE%E7%A4%BA%20Bilibili%20%E8%A7%86%E9%A2%91%E5%AD%97%E5%B9%95%E6%96%87%E7%A8%BF.user.js // @updateURL https://update.greasyfork.org/scripts//%E5%9C%A8%E4%BE%A7%E8%BE%B9%E6%98%BE%E7%A4%BA%20Bilibili%20%E8%A7%86%E9%A2%91%E5%AD%97%E5%B9%95%E6%96%87%E7%A8%BF.meta.js // ==/UserScript== 

等待元素加载的函数

• 这个函数用于等待页面中指定选择器的元素加载完成。它返回一个 Promise，当元素加载完成时，Promise 解析。

function waitForElementToExist(selector) { 
    // 返回一个 Promise 对象 return new Promise((resolve) => { 
    // 如果文档中已经存在指定选择器的元素 if (document.querySelector(selector)) { 
    // 直接解析 Promise，将找到的元素作为解析值 return resolve(document.querySelector(selector)); } // 如果元素尚未存在，使用 MutationObserver 监听文档变化 const observer = new MutationObserver(() => { 
    // 当找到指定选择器的元素时 if (document.querySelector(selector)) { 
    // 解析 Promise，并传递找到的元素作为解析值 resolve(document.querySelector(selector)); // 停止监听文档变化 observer.disconnect(); } }); // 开始监听文档变化，监测子节点的添加或删除 observer.observe(document.body, { 
    subtree: true, childList: true, }); }); } 

发起请求的函数（重要）

• 这个函数使用 fetch 函数向指定的 URL 发起请求，并处理响应，返回解析后的数据。

async function request(url, options) { 
    // 使用 fetch 发起请求的逻辑 return fetch(`https://api.bilibili.com${ 
     url}`, { 
    ...options, credentials: "include", }) .then((res) => res.json()) .then((data) => { 
    if (data.code != 0) { 
    throw new Error(data.message); } return data.data; }); } 

sleep

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); 

样式定义

GM_addStyle(` .transcript-box { 
    border: 1px solid #e1e1e1; border-radius: 6px; padding: 12px 16px; max-height: 50vh; overflow: scroll; margin-bottom: 20px; pointer-events: initial; } .transcript-line { 
    display: flex; } .transcript-line:hover { 
    background-color: #0002; } .transcript-line.active { 
    font-weight: bold; background-color: #0002; } .transcript-line-time { 
    flex: none; overflow: hidden; width:66px; user-select: none; corsur: pointer; color: var(--bpx-fn-hover-color,#00b5e5); } .transcript-line-content { 
    // white-space: nowrap; } `); 

工具函数模块：

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); function fixNumber(n) { 
    // 数字格式化的逻辑 // ... } function parseTime(t) { 
    // 时间解析的逻辑 // ... } const MUSIC_FILTER_RATE = 0.85; function fixNumber(n) { 
    return n.toLocaleString("en-US", { 
    minimumIntegerDigits: 2, useGrouping: false, }); } function parseTime(t) { 
    t = parseInt(t); return `${ 
     fixNumber(parseInt(t / 60))}:${ 
     fixNumber(t % 60)}`; } 

这一模块包含一些用于处理通用任务的工具函数，如睡眠函数、数字格式化、时间解析等。

showTranscript（重要）

• 这里才最终得到了字幕

const transcriptBox = document.createElement("div"); transcriptBox.className = "transcript-box"; # 这里才最终得到了字幕 async function showTranscript(subtitleInfo) { 
    console.log("showTranscript", subtitleInfo); const { 
    body: lines } = await fetch( subtitleInfo.subtitle_url.replace(/^\/\//, "https://") ).then((res) => res.json()); console.log("lines", lines); transcriptBox.innerHTML = ""; for (let line of lines) { 
    if (line.music && line.music > MUSIC_FILTER_RATE) { 
    continue; } let timeLink = document.createElement("a"); timeLink.className = "transcript-line-time"; // timeLink.setAttribute("data-index", line.index); timeLink.textContent = parseTime(line.from); timeLink.addEventListener("click", () => { 
    video.currentTime = line.from; }); let lineDiv = document.createElement("div"); lineDiv.className = "transcript-line"; lineDiv.setAttribute("data-from", line.from); lineDiv.setAttribute("data-to", line.to); lineDiv.appendChild(timeLink); let span = document.createElement("span"); span.className = "transcript-line-content"; span.textContent = line.content; lineDiv.appendChild(span); transcriptBox.appendChild(lineDiv); } } 

getBvid

• 例子： “https://www.bilibili.com/video/BV16v421i7z3?p=2”，调用 getBvid() 将返回 { bvid: ‘BV16v421i7z3’, curPage: 1 }
• 此函数会被getTranscript和路由调用

function getBvid(route /* : string|undefined */) { 
    let url; if (route) { 
    url = new URL(window.location.origin + route);// new URL(...) 是 JavaScript 中用于创建 URL 对象的构造函数。这个构造函数允许你方便地操作和解析 URL 的各个部分 } else { 
    url = new URL(window.location.href); } const bvid = url.pathname.match(/\/video\/(\w+)/)?.[1]; // if (!bvid) throw new Error("没有找到 bvid"); let curPage = url.searchParams.get("p") - 1; if (!curPage || curPage == -1) { 
    curPage = 0; } return { 
    bvid, curPage }; } 

getTranscript（重要）

接口说明 videoInfo

• http://api.bilibili.com/x/web-interface/view?bvid=%s

• 例如：https://api.bilibili.com/x/web-interface/view?bvid=BV1pt421a7gF，返回

{ 
    "code": 0, "message": "0", "ttl": 1, "data": { 
    "bvid": "BV1pt421a7gF", "aid": , "videos": 1, "tid": 207, "tname": "财经商业", "copyright": 1, "pic": "http://i2.hdslb.com/bfs/archive/ce7afe5e13bc36c11e59e06fccff08ddf.jpg", "title": "春晚赞助商兴衰，见证中国商业变迁", "pubdate": , "ctime": , "desc": "京东五粮液是今年春晚的主角，没办法，毕竟赞助商给的钱太多了。站在商业博主视角，盘点一下春晚赞助商。首先要说，央视春晚真的是太赚钱了，成本低，赞助多，利润高。央视舞台演员们抢着上，片酬很低，赵本山冯巩刘谦也才几千块钱，但是冠名费一亿起。不管你看不看，这钱是必须赚。", "desc_v2": [ { 
    "raw_text": "京东五粮液是今年春晚的主角，没办法，毕竟赞助商给的钱太多了。站在商业博主视角，盘点一下春晚赞助商。首先要说，央视春晚真的是太赚钱了，成本低，赞助多，利润高。央视舞台演员们抢着上，片酬很低，赵本山冯巩刘谦也才几千块钱，但是冠名费一亿起。不管你看不看，这钱是必须赚。", "type": 1, "biz_id": 0 } ], "state": 0, "duration": 127, "mission_id": , "rights": { 
    "bp": 0, "elec": 0, "download": 1, "movie": 0, "pay": 0, "hd5": 1, "no_reprint": 1, "autoplay": 1, "ugc_pay": 0, "is_cooperation": 0, "ugc_pay_preview": 0, "no_background": 0, "clean_mode": 0, "is_stein_gate": 0, "is_360": 0, "no_share": 0, "arc_pay": 0, "free_watch": 0 }, "owner": { 
    "mid": , "name": "娄哥商业创业", "face": "https://i0.hdslb.com/bfs/face/7ddad6531f47e567aab7c4fa7df306cf97.jpg" }, "stat": { 
    "aid": , "view": 24956, "danmaku": 4, "reply": 47, "favorite": 24, "coin": 10, "share": 3, "now_rank": 0, "his_rank": 0, "like": 272, "dislike": 0, "evaluation": "", "vt": 0 }, "argue_info": { 
    "argue_msg": "", "argue_type": 0, "argue_link": "" }, "dynamic": "", "cid": , "dimension": { 
    "width": 1920, "height": 1080, "rotate": 0 }, "premiere": null, "teenage_mode": 0, "is_chargeable_season": false, "is_story": false, "is_upower_exclusive": false, "is_upower_play": false, "is_upower_preview": false, "enable_vt": 0, "vt_display": "", "no_cache": false, "pages": [ { 
    "cid": , "page": 1, "from": "vupload", "part": "春晚赞助商兴衰，见证中国商业变迁", "duration": 127, "vid": "", "weblink": "", "dimension": { 
    "width": 1920, "height": 1080, "rotate": 0 }, "first_frame": "http://i1.hdslb.com/bfs/storyff/nsasoz7kgbz9p3a1l6u6dl7zlj_firsti.jpg" } ], "subtitle": { 
    "allow_submit": false, "list": [ { 
    "id": , "lan": "ai-zh", "lan_doc": "中文（自动生成）", "is_lock": false, "subtitle_url": "", "type": 1, "id_str": "", "ai_type": 0, "ai_status": 2, "author": { 
    "mid": 0, "name": "", "sex": "", "face": "", "sign": "", "rank": 0, "birthday": 0, "is_fake_account": 0, "is_deleted": 0, "in_reg_audit": 0, "is_senior_member": 0 } } ] }, "is_season_display": false, "user_garb": { 
    "url_image_ani_cut": "" }, "honor_reply": { 
   }, "like_icon": "", "need_jump_bv": false, "disable_show_up_info": false, "is_story_play": 1 } } 

接口说明 videoInfo

• https://api.bilibili.com/x/player/v2?aid=&cid= 会返回一个带有私人信息和”subtitle_url”: “//aisubtitle.hdslb.com/bfs/ai_subtitle/prod/18005********?auth_key=*********************”,的对象

代码解读

async function getTranscript(route /* : string|undefined */) { 
    const { 
    bvid, curPage } = getBvid(route); if (!bvid) throw new Error("没有找到 bvid"); const videoInfo = await request("/x/web-interface/view?bvid=" + bvid); const { 
    subtitle: { 
    subtitles = [] }, } = await request( `/x/player/v2?aid=${ 
   videoInfo.aid}&cid=${ 
   videoInfo.pages[curPage].cid}` ); console.log("subtitles", subtitles); transcriptBox.innerHTML = "没有字幕"; if (subtitles.length == 0) throw new Error("没有字幕"); return subtitles; } 

main

async function main() { 
    "use strict"; const subtitles = await getTranscript(); // B站页面是SSR（服务器端渲染Server-Side Rendering）的，如果插入过早，页面 js 检测到实际 Dom 和期望 Dom 不一致，会导致重新渲染 await waitForElementToExist("img.bili-avatar-img"); const video = await waitForElementToExist("video"); // const oldfanfollowEntry = await waitForElementToExist("#oldfanfollowEntry"); // 为DOM 元素注册事件处理函数： // 当 video 元素触发 timeupdate 事件（视频时间更新时）时，字幕的高亮显示。 video.addEventListener("timeupdate", () => { 
    const currentTime = video.currentTime; const lastActiveLine = document.querySelector(".transcript-line.active"); const lineBoxes = lastActiveLine ? [lastActiveLine, lastActiveLine.nextSibling] : document.querySelectorAll(".transcript-line"); for (let i = 0; i < lineBoxes.length; i++) { 
    const currentLine = lineBoxes[i]; const from = +currentLine.getAttribute("data-from"); const to = +currentLine.getAttribute("data-to"); // console.log({ i, from, to, currentTime }, currentLine); if (currentTime >= to || currentTime <= from) { 
    // Remove the 'active' class if (currentLine.classList.contains("active")) { 
    currentLine.classList.remove("active"); } } if (currentTime > from && currentTime < to) { 
    const targetPosition = currentLine.offsetTop - transcriptBox.clientHeight * 0.5; transcriptBox.scrollTo(0, targetPosition); // Add the 'active' class to the current line currentLine.classList.add("active"); break; } } }); await showTranscript(subtitles[0]); const danmukuBox = await waitForElementToExist("#danmukuBox"); // B站页面是SSR的，如果插入过早，页面 js 检测到实际 Dom 和期望 Dom 不一致，会导致重新渲染 danmukuBox.parentNode.insertBefore(transcriptBox, danmukuBox); } 

updateTranscript

async function updateTranscript(route /* : string|undefined */) { 
    const subtitles = await getTranscript(route); await showTranscript(subtitles[0]); } 

调用main函数

main(); 

路由监听并调用：

• 这个函数用于监听浏览器历史变化和页面路由变化，当路由发生变化时，触发相应的处理逻辑。

function getCurrentState(route) { 
    const { 
    bvid, curPage } = getBvid(route); return `${ 
   bvid}?p=${ 
   curPage}`; } let lastState = getCurrentState(); traceRoute(); function traceRoute() { 
    // popstate 可以监测到 hashchange window.addEventListener("popstate", (evt) => { 
    const to = getCurrentState(); if (to !== lastState) { 
    console.log("bvid changed when popstate", lastState, to); updateTranscript(); } }); let theHistory /* History */ = history || window.history; if (!theHistory) return; const replacement = (originFn /* History['pushState'] */) => { 
    return (data /* any */, t /* string */, route /* string | undefined */) => { 
    const from = getCurrentState(); const to = getCurrentState(route); if (route && from !== to) { 
    console.log("bvid changed when pushState", from, to, route); updateTranscript(route); } const ret = originFn.call(theHistory, data, t, route); if (to) { 
    lastState = to; } return ret; }; }; overrideMethod( /* <History['pushState']> */ theHistory, "pushState", replacement ); overrideMethod( /* <History['replaceState']> */ theHistory, "replaceState", replacement ); } function overrideMethod /* <F extends Function> */( target /* : { [key: string]: any } */, key /* : string */, replacement /* : (f: F) => F */ ) { 
    if (!(key in target)) return; const originFn /* : F */ = target[key]; const wrapped /* : F */ = replacement(originFn); if (wrapped instanceof Function) { 
    target[key] = wrapped; } } 

CG

• https://www.gitbook.com/?

• https://www.appinn.com/category/android/

• 如何开发一个油猴脚本- 从零开始编写一个油猴脚本

• 油猴安装、编写及添加脚本 笔记

• 油猴开发指南

• 深入浅出 Greasemonkey

• 最经常遇到的麻烦之一是在用户脚本里定义的变量和函数不能被别的脚本访问。事实上，只要用户脚本运行完了，所有的变量和函数就都不能使用了。如果您需要引用用户脚本中的变量或者函数，应该显式的把它们定义为window对象的属性，它是始终存在的。

window.helloworld = function() { 
    alert('Hello world!'); } window.setTimeout("helloworld()", 60); // 目的达到了！页面完成加载一秒后，一个提示框骄傲的弹了出来，写着：“Hello world!” // 然而，这有点像用全局变量来做局部变量该做的事。最佳的解决方案是定义匿名函数，把它作为第一个参数传递给 window.setTimeout。 

今天的文章
字幕脚本是什么_自动刷弹幕脚本分享到此就结束了，感谢您的阅读。