☰

浏览器文本阅读

选中文本进行朗读，支持拖动、最小化、倍速、音调调整及重复播放（可自定义次数）

  1. // ==UserScript==
  2. // @name         浏览器文本阅读
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.5
  5. // @description  选中文本进行朗读，支持拖动、最小化、倍速、音调调整及重复播放（可自定义次数）
  6. // @author       Songmile
  7. // @match        *://*/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     'use strict';
  14.  
  15.  
  16.     const panel = document.createElement('div');
  17.     panel.style.position = 'fixed';
  18.     panel.style.bottom = '20px';
  19.     panel.style.right = '20px';
  20.     panel.style.background = 'rgba(30, 30, 30, 0.95)';
  21.     panel.style.color = 'white';
  22.     panel.style.padding = '15px';
  23.     panel.style.borderRadius = '10px';
  24.     panel.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)';
  25.     panel.style.zIndex = '9999';
  26.     panel.style.fontFamily = 'Arial, sans-serif';
  27.     panel.style.width = '300px';
  28.     panel.style.cursor = 'move'; 
  29.     panel.innerHTML = `
  30.         <div style="display: flex; justify-content: space-between; align-items: center;">
  31.             <strong>文本朗读控制面板</strong>
  32.             <button id="minimizeBtn" style="background: transparent; border: none; color: white; font-size: 18px; cursor: pointer;">&#x2212;</button>
  33.         </div>
  34.         <div id="controls" style="margin-top: 10px;">
  35.             <button id="playBtn" style="margin: 5px; padding: 5px 10px; background-color: #28a745; border: none; border-radius: 5px; color: white; cursor: pointer;">播放</button>
  36.             <button id="pauseBtn" style="margin: 5px; padding: 5px 10px; background-color: #ffc107; border: none; border-radius: 5px; color: white; cursor: pointer;">暂停</button>
  37.             <button id="stopBtn" style="margin: 5px; padding: 5px 10px; background-color: #dc3545; border: none; border-radius: 5px; color: white; cursor: pointer;">停止</button>
  38.             <button id="replayBtn" style="margin: 5px; padding: 5px 10px; background-color: #17a2b8; border: none; border-radius: 5px; color: white; cursor: pointer;">重复播放</button>
  39.             <div style="margin-top: 10px;">
  40.                 <label for="repeatCount">重复次数: </label>
  41.                 <input type="number" id="repeatCount" min="1" max="100" value="1" style="width: 60px;">
  42.             </div>
  43.             <br>
  44.             <div style="margin-top: 10px;">
  45.                 <label for="rate">语速: </label>
  46.                 <input type="range" id="rate" min="0.5" max="2" step="0.1" value="1">
  47.                 <span id="rateValue">1</span>x
  48.             </div>
  49.             <div style="margin-top: 10px;">
  50.                 <label for="pitch">音调: </label>
  51.                 <input type="range" id="pitch" min="0" max="2" step="0.1" value="1">
  52.                 <span id="pitchValue">1</span>
  53.             </div>
  54.             <br>
  55.             <small>选中文本后点击播放或重复播放</small>
  56.         </div>
  57.     `;
  58.     document.body.appendChild(panel);
  59.  
  60.  
  61.     const playBtn = document.getElementById('playBtn');
  62.     const pauseBtn = document.getElementById('pauseBtn');
  63.     const stopBtn = document.getElementById('stopBtn');
  64.     const replayBtn = document.getElementById('replayBtn');
  65.     const minimizeBtn = document.getElementById('minimizeBtn');
  66.     const controlsDiv = document.getElementById('controls');
  67.     const rateSlider = document.getElementById('rate');
  68.     const pitchSlider = document.getElementById('pitch');
  69.     const rateValue = document.getElementById('rateValue');
  70.     const pitchValue = document.getElementById('pitchValue');
  71.     const repeatCountInput = document.getElementById('repeatCount');
  72.  
  73.  
  74.     let utterance = null;
  75.     let isPaused = false;
  76.     let lastText = ''; 
  77.     let repeatTimes = 1;
  78.     let remainingRepeats = 1;
  79.  
  80.  
  81.     rateSlider.addEventListener('input', () => {
  82.         rateValue.textContent = rateSlider.value;
  83.         if (utterance) {
  84.             utterance.rate = parseFloat(rateSlider.value);
  85.         }
  86.     });
  87.  
  88.  
  89.     pitchSlider.addEventListener('input', () => {
  90.         pitchValue.textContent = pitchSlider.value;
  91.         if (utterance) {
  92.             utterance.pitch = parseFloat(pitchSlider.value);
  93.         }
  94.     });
  95.  
  96.  
  97.     repeatCountInput.addEventListener('input', () => {
  98.         let value = parseInt(repeatCountInput.value, 10);
  99.         if (isNaN(value) || value < 1) {
  100.             repeatCountInput.value = 1;
  101.             value = 1;
  102.         } else if (value > 100) { 
  103.             repeatCountInput.value = 100;
  104.             value = 100;
  105.         }
  106.         repeatTimes = value;
  107.     });
  108.  
  109.  
  110.     playBtn.addEventListener('click', () => {
  111.         const selectedText = window.getSelection().toString().trim();
  112.         if (selectedText) {
  113.             lastText = selectedText; 
  114.             remainingRepeats = repeatTimes;
  115.             startReading(selectedText);
  116.         } else if (lastText) {
  117.             // 如果没有选中文本，但有上一次播放的文本，则播放上一次的文本
  118.             remainingRepeats = repeatTimes;
  119.             startReading(lastText);
  120.         } else {
  121.             alert('请先选中文本再播放！');
  122.         }
  123.     });
  124.  
  125.     // 重复播放
  126.     replayBtn.addEventListener('click', () => {
  127.         if (lastText) {
  128.             remainingRepeats = repeatTimes;
  129.             startReading(lastText);
  130.         } else {
  131.             alert('没有可重复播放的文本！');
  132.         }
  133.     });
  134.  
  135.     // 暂停朗读
  136.     pauseBtn.addEventListener('click', () => {
  137.         if (speechSynthesis.speaking && !speechSynthesis.paused) {
  138.             speechSynthesis.pause();
  139.             isPaused = true;
  140.         } else if (speechSynthesis.paused) {
  141.             speechSynthesis.resume();
  142.             isPaused = false;
  143.         }
  144.     });
  145.  
  146.     // 停止朗读
  147.     stopBtn.addEventListener('click', () => {
  148.         if (speechSynthesis.speaking) {
  149.             speechSynthesis.cancel();
  150.             isPaused = false;
  151.             utterance = null;
  152.         }
  153.     });
  154.  
  155.     // 最小化面板
  156.     minimizeBtn.addEventListener('click', () => {
  157.         if (controlsDiv.style.display === 'none') {
  158.             controlsDiv.style.display = 'block';
  159.             minimizeBtn.innerHTML = '&#x2212;'; // －符号
  160.         } else {
  161.             controlsDiv.style.display = 'none';
  162.             minimizeBtn.innerHTML = '&#x2b;'; // ＋符号
  163.         }
  164.     });
  165.  
  166.     // 使面板可拖动
  167.     let isDragging = false;
  168.     let offsetX, offsetY;
  169.  
  170.     panel.addEventListener('mousedown', (e) => {
  171.         if (
  172.             e.target.id === 'minimizeBtn' ||
  173.             e.target.tagName === 'BUTTON' ||
  174.             e.target.tagName === 'INPUT' ||
  175.             e.target.tagName === 'LABEL' ||
  176.             e.target.tagName === 'SPAN'
  177.         ) {
  178.             return; // 不触发拖动事件
  179.         }
  180.         isDragging = true;
  181.         offsetX = e.clientX - panel.offsetLeft;
  182.         offsetY = e.clientY - panel.offsetTop;
  183.         panel.style.cursor = 'grabbing';
  184.     });
  185.  
  186.     document.addEventListener('mousemove', (e) => {
  187.         if (isDragging) {
  188.             panel.style.left = `${e.clientX - offsetX}px`;
  189.             panel.style.top = `${e.clientY - offsetY}px`;
  190.             panel.style.right = 'auto';
  191.             panel.style.bottom = 'auto';
  192.         }
  193.     });
  194.  
  195.     document.addEventListener('mouseup', () => {
  196.         if (isDragging) {
  197.             isDragging = false;
  198.             panel.style.cursor = 'move';
  199.         }
  200.     });
  201.  
  202.     // 开始朗读文本
  203.     function startReading(text) {
  204.         // 如果正在朗读，先停止
  205.         if (speechSynthesis.speaking) {
  206.             speechSynthesis.cancel();
  207.         }
  208.  
  209.         // 开始新的朗读
  210.         utterance = new SpeechSynthesisUtterance(text);
  211.         utterance.lang = 'zh-CN'; // 设置语言，可以改为 'en-US'
  212.         utterance.rate = parseFloat(rateSlider.value); // 语速
  213.         utterance.pitch = parseFloat(pitchSlider.value); // 音调
  214.  
  215.         utterance.onend = function () {
  216.             remainingRepeats--;
  217.             if (remainingRepeats > 0) {
  218.                 // 使用 setTimeout 确保前一个朗读结束后再开始新的
  219.                 setTimeout(() => {
  220.                     startReading(text);
  221.                 }, 500);
  222.             }
  223.         };
  224.  
  225.         speechSynthesis.speak(utterance);
  226.     }
  227.  
  228.  
  229.  
  230.     rateSlider.addEventListener('change', () => {
  231.         if (speechSynthesis.speaking && !speechSynthesis.paused) {
  232.             restartUtterance();
  233.         }
  234.     });
  235.  
  236.     pitchSlider.addEventListener('change', () => {
  237.         if (speechSynthesis.speaking && !speechSynthesis.paused) {
  238.             restartUtterance();
  239.         }
  240.     });
  241.  
  242.     function restartUtterance() {
  243.         if (utterance) {
  244.             const currentText = utterance.text;
  245.             speechSynthesis.cancel();
  246.             utterance = null;
  247.             startReading(currentText);
  248.         }
  249.     }
  250.  
  251. })();