LOVOT Studyに音声再生と同時にスクリプトを実行できる「音声再生」メニューを追加する

lovot-study-with-audio-menu

// ==UserScript==
// @name         Start LOVOT Study with audio
// @namespace    https://github.com/3110
// @version      0.3
// @description  LOVOT Studyでオーディオを再生すると同時にスクリプトを実行する
// @author       Tetsuya SAITO
// @match        https://play.lovot.life/
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant        none
// ==/UserScript==

const delay = 3; // 再生までの遅延（秒）

let $ = window.jQuery;

let player = document.createElement("audio");
player.src = "https://www.dropbox.com/s/XXXXXXXXXXXX/YYYYYY.mp3?dl=1" # 自分の環境に合わせる
player.preload = 'auto';

let isPlaying = false;

function wait(sec) {
    var objDef = new $.Deferred;
    setTimeout(function () {
        objDef.resolve(sec);
    }, sec * 1000);
    return objDef.promise();
};

waitForKeyElements("div.menu-bar_main-menu_3wjWH", ($menu) => {
    let $greenFlag = $(".green-flag_green-flag_1kiAo");
    let $stopAll = $(".stop-all_stop-all_1Y8P9");

    $("<div>", {"class": "divider_divider_1_Adi menu-bar_divider_2VFCm"}).appendTo($menu);
    $("<div>", {"class": "menu-bar_menu-bar-item_oLDa-", "text": "音楽再生"}).on("click", () => {
        if (isPlaying) {
            $stopAll.click();
            player.pause();
            player.currentTime = 0;
            isPlaying = false;
        } else {
            wait(delay).done(() => {
                let p = player.play();
                p.then(() => {
                    isPlaying = true;
                    // document.dispatchEvent(new KeyboardEvent("keydown", {key: " "})); // キーで起動する場合
                    $greenFlag.click(); // 緑の旗で開始する場合
                }).catch((err) => {
                    isPlaying = false;
                    console.log(err);
                });
            });
        }
    }).appendTo($menu);
});