5/26 寫出一個番茄鐘(二)-改變背景顏色 /自動進入下個鬧鐘 /語音設定

CodePen成果

5/26 寫出一個番茄鐘(二)-改變背景顏色 /自動進入下個鬧鐘 /語音設定

邏輯說明

• 改變背景顏色
  • 抓取輸入的時間 形成陣列
  • 判斷陣列的序列
    • 基數==工作時間 ==背景紅色
    • 偶數==休息時間==背景綠色
    • 最後一個==結束計時 ==背景白色
    • 之後想改成可以讓使用者自己選擇顏色
• 自動進入下個鬧鐘
  • 抓取所有輸入的時間
  • 加總所有時間
  • 設定setInterval
• 語音設定
  • 抓取輸入的文字
  • 使用new SpeechSynthesisUtterance()
  • 在特定時間撥放

使用程式(本次新學會的)

new SpeechSynthesisUtterance()

JS30-Day23-Speech Synthesis

SpeechSynthesisUtterance Property

SpeechSynthesisUtterance.lang：設定或取得發音的語言。

SpeechSynthesisUtterance.pitch：設定或取得發音的音調。

SpeechSynthesisUtterance.rate：設定或取得發音的速度。

SpeechSynthesisUtterance.text：設定或取得發音的文字內容。

SpeechSynthesisUtterance.voice：設定或取得發音的聲音。

SpeechSynthesisUtterance.volume：設定或取得發音的音量。

function finishedAlarm(text) {
    var msg = new SpeechSynthesisUtterance();
    msg.text = text;
    msg.lang = ["zh-TW"];
    msg.volume = 100; // 聲音的音量
    msg.rate = 0.7; //語速，數值，預設值是1，範圍是0.1到10
    msg.pitch = 1.5; // 表示說話的音高，數值，範圍從0（最小）到2（最大）。預設值為1
    speechSynthesis.speak(msg);
  }
});