一个简单的js javascript+html字幕浮动窗口

第一版，没有拖动实现

<div class="subtitle-panel-body">
      <div>
        <div id="subtitleBox" style="min-height:2em;font-size:18px;"></div>
        <div>
          <input id="subtitleProgress" type="range" min="0" max="100" value="0" style="width:200px">
          <span id="subtitleTime">0.0s / 0.0s</span>
        </div>
        <button id="playBtn">播放</button>
        <button id="pauseBtn">暂停</button>
        <button id="stopBtn">停止</button>
        |
        <button id="prevBtn">上一句</button>
        <button id="nextBtn">下一句</button>
      </div>
    </div>

<style>
    /******** 字幕浮动 **************/
    .subtitle-panel {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 320px;
      z-index: 2147483647;        /* 尽量浮在页面最上层 */
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,.2);
      font-family: system-ui, sans-serif;
      overflow: hidden;
    }
    .subtitle-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 10px;
      background: #f3f3f3;
      border-bottom: 1px solid #ddd;
      cursor: move;               /* 提示可拖 */
      user-select: none;
    }
    .subtitle-panel-header button {
      border: none;
      background: transparent;
      font-size: 16px;
      cursor: pointer;
      line-height: 1;
    }
    .subtitle-panel-body { padding: 10px; }
    #subtitleBox {
      min-height: 2em;
      font-size: 18px;
      margin-bottom: 6px;
      white-space: pre-wrap;
    }
  </style>

main.js

//main.js 调用
const player = new SubtitlePlayer(cues, {
    container: 'subtitleBox',
    progress: 'subtitleProgress',
    timeLabel: 'subtitleTime',
    loadButton: 'loadBtn',          // 这里传 id，bindLoadButton 内部 resolveEl 找到元素并绑 click
    loader: async () => {
      const text = await (await fetch(chrome.runtime.getURL('subtitles/demo.srt'))).text();
      return parseSRT(text);
    },
    buttons: {
      play: 'playBtn',
      pause: 'pauseBtn',
      prev: 'prevBtn',
      next: 'nextBtn',
      stop: 'stopBtn'
    }
  });
  player.play();   // 开始按时间显示

class SubtitlePlayer{
  constructor(cues, options = {}) {


    this.loader = options.loader || null;
    this.bindLoadButton(options.loadButton);

  }
  bindLoadButton(ref) {
    const el = this.resolveEl(ref);
    if (!el) return;
    const handler = async (e) => {
      e.preventDefault();
      console.log('[SubtitlePlayer] load clicked');
      if (!this.loader) {
        console.warn('[SubtitlePlayer] 未提供 loader');
        return;
      }
      try {
        const cues = await this.loader();
        console.log('[SubtitlePlayer] cues:', cues.length);
        this.setCues(cues);
        this.play();
      } catch (err) {
        console.error('[SubtitlePlayer] 加载失败', err);
      }
    };
    el.addEventListener('click', handler);
    this._boundHandlers.push({ el, type: 'click', handler });
  }
}

增加拖动逻辑

具体的字幕解析

参考

《AI》

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/avi9111/article/details/170450452