生成AI+スマホで作成「WordPress(ブログ)で使えるJavaScript」 時刻を読み上げる

※音声が出ます
※ボリュームにご注意ください
時刻を読み上げる

※音声が出ます
※ボリュームにご注意ください
<button id="timeBtn" onclick="disableButton()">時刻を読み上げる</button>

function disableButton() {
  const btn = document.getElementById('timeBtn');
  
  // 1. ボタンを無効化する
  btn.disabled = true;
  btn.innerText = "読み上げています"; // 必要に応じて状態がわかるように文字を変える

  // 2. 3秒後（3000ミリ秒後）に元に戻す
  setTimeout(() => {
    btn.disabled = false;
    btn.innerText = "時刻を読み上げる";
  }, 3000);
}

document.getElementById('timeBtn').addEventListener('click', () => {
    const now = new Date();
    let hours = now.getHours();
    const minutes = now.getMinutes();
    
    // 午前・午後の判定
    const period = hours < 12 ? "午前" : "午後";
    // 12時間制に変換（お好みで）
    if (hours > 12) hours -= 12;

    const text = `現在の時刻は、${period}${hours}時${minutes === 0 ? '' : minutes + '分'}です。`;

    const uttr = new SpeechSynthesisUtterance(text);
    uttr.lang = 'ja-JP';
    uttr.rate = 1.0; // 速度 (0.1〜10)
    uttr.pitch = 1.0; // 声の高さ (0〜2)

    window.speechSynthesis.speak(uttr);
});

#timeBtn {
    background-color: #007bff;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 50px; /* カプセル型 */
    box-shadow: 0 4px #0056b3; /* 下側に濃い色の影 */
}

#timeBtn:active { /* クリックした時 */
     box-shadow: none;   /* 影を消す */
     transform: translateY(4px); /* 下に4px下げる（押し込んだ演出） */
}

/* 無効化（disabled）された時のスタイル */
#timeBtn:disabled {
    background-color: #ccc;    /* グレーにする */
    box-shadow: 0 4px #888;
    color: #000;
    cursor: not-allowed;      /* カーソルを禁止マークにする */
    opacity: 0.7;              /* 少し薄くする */
}