[編集モード] 緊張感のあるタイマー（最後にカウントあり）V2

以前作ったタイマーの改良版です。以前のアカウントがツイッターで登録していたためこちらで登録しなおしました。

/* =========================================================================================================
---- 概要 ----
1秒ごとにピッピッ鳴って焦燥感を煽ります。
また、時計を見ないでいいように切りのいい時間でアナウンスをしてくれます。
お勉強のお供にどうぞ！！

要望などがありましたら
https://x.com/g_doudoC/status/1808149662802891252

---- 行った変更点 ----
 同時再生ができるように同期処理を取り入れた（無駄だったw）
 システム時計から引き算をするのではなく、素直に1秒毎のタイマーを使う処理に変えた
 ボタンを一度に反復を利用して作成
 ↑↓長押しで連続増減する
 スタート中に↑↓を押すとストップする
 止めない限り、スタートを1回しか押せないようにした

---- 今後の改善点 ----
 重複再生ができるライブラリを自分で作ってそれを使う

AndroidとWindowsの自動音声のスピードは調整しています。
 それ以外のOSを利用していて読み上げスピードに違和感を感じたら教えてください

OtoLogic(https://otologic.jp)さんの音源を使わせていただきました
 =========================================================================================================*/

# --- 初期化処理 ---
全タイマー停止
audio=「https://n3s.nadesi.com/image.php?f=38.mp3」をオーディオ開く
H=0。M=0。S=0
updown_button={}。func_buton={}
updown_ID=NULL。タイマーID=NULL。E_time=NULL

OS取得で条件分岐:
    「windows」ならば:
        話者速度=5
    違えば:
        話者速度=3

# --- DOM要素を作成 ---
timeで["H","M","S"]を反復:
#    "time反復>> time:{time}"を表示
    timeで条件分岐:
        "H"なら、「時:」のラベル作成。ここまで
        "M"なら、「分:」のラベル作成。ここまで
        "S"なら、「秒:」のラベル作成。ここまで

sideで["up","down"]を反復:
#        "side反復>> time:{time} side:{side}"を表示
        sideで条件分岐:
            "up"なら:
                updown_button["{time}{side}"]=upbutton_set
            "down"なら:
                updown_button["{time}{side}"]=downbutton_set

updown_button["{time}{side}"]にbutton_event_add
        updown_button["{time}{side}"]に{
            "余白": "7px",
            "文字サイズ": "18px"
        }をDOMスタイル一括設定

/*
WINDOWの"focusout"がDOMイベント発火した時には:
    「イベント:{対象イベント["type"]}」を表示
    「停止:{updown_ID}」を表示
    updown_IDのタイマー停止
*/
    
関数　upbutton_set
    obj=「↑」のボタン作成
    objの"mousedown"がDOMイベント発火した時には:
        Event=対象。
    	タイマーIDのタイマー停止
	    タイマーID=NULL
        E_time=Eventのイベント対象特定。E_timeを時計増やす

# コールバックでの変数はローカルの可能性あり
        # グローバルで代入していない変数は使わないように
        0.5秒後には
            0.1秒毎には:
                E_timeを時計増やす
            updown_ID=対象
        ここまで
        updown_ID=対象

objを戻す
ここまで

関数　downbutton_set
    obj=「↓」のボタン作成
    objの"mousedown"がDOMイベント発火した時には:
        Event=対象。
    	タイマーIDのタイマー停止
	    タイマーID=NULL
        E_time=Eventのイベント対象特定。E_timeを時計減らす

# コールバックでの変数はローカルの可能性あり
        # グローバルで代入していない変数は使わないように
        0.5秒後には
            0.1秒毎には:
                E_timeを時計減らす
            updown_ID=対象
        ここまで
        updown_ID=対象
ここまで

関数　button_event_add(objに)
    Eventで["mouseup","mouseleave"]を反復:
        objのEventがDOMイベント発火した時には:
#            「イベント:{対象イベント["type"]}」を表示
#            「停止:{updown_ID}」を表示
            updown_IDのタイマー停止
ここまで

改行作成

funcで["スタート","ストップ","リセット"]を反復:
    func_buton[func] = funcのボタン作成
    func_buton[func]に{
      "余白": "10px",
      "文字サイズ": "30px"
    }をDOMスタイル一括設定

# --- イベント設定 ---
func_buton["スタート"]をクリックした時には
	もし、((H+M+S = 0) || タイマーID!=NULL)なら、NULLを戻す
	「スタート」と話す
    １秒毎には:
        差表示処理
    タイマーID=対象
ここまで

func_buton["ストップ"]をクリックした時には
	タイマーIDのタイマー停止
	タイマーID=NULL
ここまで

func_buton["リセット"]をクリックした時には
	タイマーIDのタイマー停止
	タイマーID=NULL
	H=0。M=0。S=0
	時間変更
ここまで

時間変更

# --- 同期処理 ---
関数 秒音再生とは
    ASYNC
    audioをオーディオ停止
	audioをオーディオ再生
ここまで

関数 （STRで）時報再生とは
    ASYNC
    STRと話す
ここまで

# --- 関数定義 ---
関数　イベント対象特定(Eの)
    updown_buttonを反復:
        もし、対象=Eならば:
            MID(対象キー,1,1)を戻す
ここまで

関数　時計増(Tを)
    Tで条件分岐:
        "H"ならば:
            H=H+1
            もし、H >= 60ならば、H=0
        "M"ならば:
            M=M+1
            もし、M >= 60ならば、M=0
        "S"ならば:
            S=S+1
            もし、S >= 60ならば、S=0
    時間変更
ここまで

関数　時計減(Tを)
    Tで条件分岐:
        "H"ならば:
            H=H-1
            もし、H < 0ならば、H=59
        "M"ならば:
            M=M-1
            もし、M < 0ならば、M=59
        "S"ならば:
            S=S-1
            もし、S < 0ならば、S=59
    時間変更
ここまで

●時間変更とは
    ZH=Hを2でゼロ埋め
    ZM=Mを2でゼロ埋め
    ZS=Sを2でゼロ埋め
    全描画クリア
	「bold 120px serif」に描画フォント設定して、[25,150]に「{ZH}:{ZM}:{ZS}」を文字描画。
ここまで

●差表示処理とは
	S=S-1
	# 0h0m0sより下になるとことはないので除外

# 秒の繰り下がり
    もし、S<0なら:
        M=M-1
        S=59
	# 分の繰り下がり
    もし、M<0なら:
        H=H-1
        M=59
        
	# --- 音声 ---
	秒音再生
	もし、(H+M = 0)ならば:
        もし、S=30ならば、「30秒」で時報再生
        違えば、もし、(S<=10 && S!=0)ならば、Sで時報再生。
        違えば、もし、S=0ならば、「ゼロ」で時報再生。
    もし、S=0ならば:
        もし(H=0 && ((M%10 = 0 && M!=0) || M=1))ならば、「{M}分」で時報再生
        もし(H>0 && M=0)ならば、「{H}時間」で時報再生
	もし、(H+M+S = 0)なら:
        タイマーIDのタイマー停止
		「時間です」と話す
	
	# --- 画面更新 ---
	時間変更
ここまで。

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] 緊張感のあるタイマー（最後にカウントあり）V2

素材のアップロード