扇贝自动读单词

扇贝读单词
当前为 2024-10-22 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         扇贝自动读单词
// @namespace    https://web.shanbay.com/*
// @version      0.2
// @description  扇贝读单词
// @author       yky
// @match        https://web.shanbay.com/*
// @icon         https://static.baydn.com/static/img/shanbay_favicon.png
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
  "use strict";
  window.timeout = [];
  let interval = 2000;
  const zone = document.createElement("div");
  zone.style.position = "fixed";
  zone.style.top = "200px";
  zone.style.right = "200px";
  zone.style.width = "80px";
  zone.style.display = "flex";
  zone.style.flexDirection = "column";
  document.body.appendChild(zone);

  const play = () => {
    const imgs = document.querySelectorAll("[class^=index_wordsInner] img");
    const audioArray = Array.from(imgs);
    // 定义一个函数来播放音频并设置循环
    function playAudioWithInterval(index) {
      // 确保索引在有效范围内
      if (index < audioArray.length) {
        // 获取当前音频元素
        const audio = audioArray[index];
        // 播放当前音频
        audio.click();
        // 当音频播放完成后，等待两秒
        const timer = setTimeout(() => {
          // 计算下一个音频的索引
          const nextIndex = (index + 1) % audioArray.length;
          // 播放下一个音频
          playAudioWithInterval(nextIndex);
        }, interval);
        window.timeout.push(timer);
      } else {
        // 当所有音频播放完毕后，从头开始播放
        const timer = setTimeout(() => {
          playAudioWithInterval(0);
        }, interval);
        window.timeout.push(timer);
      }
    }
    playAudioWithInterval(0);
  };

  // 创建按钮元素
  const buildBtn = (textContent = "Play", fn) => {
    const button = document.createElement("button");
    button.textContent = textContent;

    // 添加样式
    button.style.padding = "10px 20px";
    button.style.fontSize = "16px";
    button.style.cursor = "pointer";
    button.style.border = "none";
    button.style.borderRadius = "5px";
    button.style.outline = "none";
    button.style.color = "white";
    button.style.backgroundColor = "rgb(32, 158, 133)";
    button.style.transition = "background-color 0.3s";

    // 添加hover样式
    button.onmouseover = function () {
      this.style.backgroundColor = "rgb(82, 208, 183)";
    };
    button.onmouseout = function () {
      this.style.backgroundColor = "rgb(32, 158, 133)";
    };

    // 添加点击事件监听器
    button.onclick = fn;

    // 将按钮添加到body元素中
    zone.appendChild(button);
  };

  buildBtn("Play", function () {
    if (this.textContent === "Play") {
      this.textContent = "Pause";
      play();
      // 这里可以添加暂停音乐的代码
    } else {
      this.textContent = "Play";
      // 这里可以添加播放音乐的代码
      window.timeout.forEach((item) => {
        clearTimeout(item);
      });
    }
  });

  const setBtnStyle = (btn) => {
    btn.style.padding = "10px 20px";
    btn.style.fontSize = "16px";
    btn.style.cursor = "pointer";
    btn.style.border = "none";
    btn.style.borderRadius = "5px";
    btn.style.outline = "none";
    btn.style.color = "white";
    btn.style.backgroundColor = "rgb(32, 158, 133)";
  };

  const speedController = () => {
    const ele = document.createElement("div");
    ele.style.display = "flex";
    ele.style.flexDirection = "column";
    ele.style.gap = "8px";
    ele.style.marginTop = "8px";
    const btn1 = document.createElement("button");
    setBtnStyle(btn1);
    btn1.textContent = "1秒";
    btn1.onclick = () => {
      interval = 1000;
    };
    const btn2 = document.createElement("button");
    setBtnStyle(btn2);
    btn2.textContent = "2秒";
    btn2.onclick = () => {
      interval = 2000;
    };
    const btn3 = document.createElement("button");
    setBtnStyle(btn3);
    btn3.textContent = "3秒";
    btn3.onclick = () => {
      interval = 3000;
    };
    zone.appendChild(ele);
    ele.appendChild(btn1);
    ele.appendChild(btn2);
    ele.appendChild(btn3);
  };
  speedController();
  const selectWordComponent = () => {
    const div = document.createElement("div");
    const input = document.createElement("input");
    input.style.width = "60px";
    input.type = "number";
    div.style.padding = "8px 0";
    div.appendChild(input);
    zone.appendChild(div);
    let timer;
    const playSingle = (inputVal) => {
      const imgs = document.querySelectorAll("[class^=index_wordsInner] img");
      const audioArray = Array.from(imgs);
      const audio = audioArray[inputVal - 1];
      if (audio) {
        audio.click();
        timer = setTimeout(() => {
          // 播放下一个音频
          playSingle(input.value);
        }, 2000);
      }
    };
    buildBtn("Play", function () {
      if (this.textContent === "Play") {
        this.textContent = "Pause";
        playSingle(input.value);
        // 这里可以添加暂停音乐的代码
      } else {
        this.textContent = "Play";
        // 这里可以添加播放音乐的代码
        clearTimeout(timer);
      }
    });
  };
  selectWordComponent();
})();
欢迎访问Greasy Fork镜像
