扇贝自动读单词

扇贝读单词
目前为 2024-10-20 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         扇贝自动读单词
// @namespace    https://web.shanbay.com/*
// @version      0.1
// @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";
    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 = () => {
        const button = document.createElement("button");
        button.textContent = "Play";
        button.id = "play";

        // 添加样式
        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 = function () {
            if (this.textContent === "Play") {
                this.textContent = "Pause";
                play();
                // 这里可以添加暂停音乐的代码
            } else {
                this.textContent = "Play";
                // 这里可以添加播放音乐的代码
                window.timeout.forEach((item) => {
                    clearTimeout(item);
                });
            }
        };

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

    buildBtn();

    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();
})();
欢迎访问Greasy Fork镜像
