Beispiel:JS-WebSpeech-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>What's the time?</title>  
  <style>
svg { 
  --bgcolor: #fdfcf3;
  --primarycolor: #337599;
  --accent1color: #dfac20;
  --accent2color: #c82f04;  
  --start-hours: 0;
  --start-minutes: 0;
  --start-seconds: 0;  
  height: 25em;
}
#clockface {
  fill: var(--bgcolor);
  stroke: var(--primarycolor);
  stroke-width: 2;
}

#indizes > use,
.hand {
  stroke: var(--primarycolor);
  stroke-width: 1;
  stroke-linecap: round;  
}  

#indizes > use:nth-child(3n+3) {
  stroke-width: 3;
}

#hours {
  stroke: var(--primarycolor);	
  stroke-width: 4;
  transform: rotate(calc(var(--start-hours) * 30deg));
  animation: rotateHourHand calc(12 * 60 * 60s) linear infinite;
  animation-delay: calc(calc(var(--start-minutes) * -60 * 1s) + calc(var(--start-seconds) * -1 * 1s));
}
@keyframes rotateHourHand {
  from {
    transform: rotate(calc(var(--start-hours) * 30deg));
  }
  to {
    transform: rotate(calc(var(--start-hours) * 30deg + 360deg));
  }
}

#minutes {
  stroke-width: 2;
  transform: rotate(calc(var(--start-minutes) * 6deg));
  animation: rotateMinuteHand 3600s steps(60) infinite;
  animation-delay: calc(var(--start-seconds) * -1 * 1s);
}

@keyframes rotateMinuteHand {
  from {
    transform: rotate(calc(var(--start-minutes) * 6deg));
  }
  to {
    transform: rotate(calc(var(--start-minutes) * 6deg + 360deg));
  }
}

#seconds {
  stroke: var(--accent2color);
  transform: rotate(calc(var(--start-seconds) * 6deg));
  animation: rotateSecondsHand 60s steps(60) infinite;
}

@keyframes rotateSecondsHand {
  from {
    transform: rotate(calc(var(--start-seconds) * 6deg));
  }
  to {
    transform: rotate(calc(var(--start-seconds) * 6deg + 360deg));
  }
}
body {
max-width: 40em;
margin: 0 auto;
font-family: sans-serif;
}

</style>
</head>
 
<body>
  <h1>What's the time?</h1>
 
<svg viewBox="-100 -100 200 200"> 
  <defs>
    <line id="index" x1="80" y1="0" x2="90" y2="0" />
  </defs>		
  <circle id="clockface" r="98" />
  
  <g id="indizes">
	<use xlink:href="#index" transform="rotate(300)" />	
	<use xlink:href="#index" transform="rotate(330)" />	
	<use xlink:href="#index" transform="rotate(0)" />
	<use xlink:href="#index" transform="rotate(30)" />
	<use xlink:href="#index" transform="rotate(60)" />
	<use xlink:href="#index" transform="rotate(90)" />
	<use xlink:href="#index" transform="rotate(120)" />	
	<use xlink:href="#index" transform="rotate(150)" />	
	<use xlink:href="#index" transform="rotate(180)" />	
	<use xlink:href="#index" transform="rotate(210)" />
	<use xlink:href="#index" transform="rotate(240)" />
	<use xlink:href="#index" transform="rotate(270)" />	
  </g>	
  
  <line class="hand" id="hours" x1="0" y1="0" x2="0" y2="-50" />
  <line class="hand" id="minutes" x1="0" y1="0" x2="0" y2="-95" />
  <g id="seconds" class="hand">
    <line  x1="0" y1="0" x2="0" y2="-55" />
	<circle cx="0" cy="-60" r="5" fill="none" />
	<line x1="0" y1="-65" x2="0" y2="-95" />
  </g>	
  <circle id="origin" r="2" />  
  
</svg> 
<button type="button">New time!</button>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const svg = document.querySelector('svg');
  const repetition = 5;
  let current = 0;
  const speakButton = document.querySelector('button');

   resetToCurrentTime();

  speakButton.addEventListener('click', newTime);

  function resetToCurrentTime() {
    const currentTime = new Date();
    svg.style.setProperty('--start-seconds', 0); 
    svg.style.setProperty('--start-minutes', currentTime.getMinutes());
    svg.style.setProperty('--start-hours', currentTime.getHours() % 12);
  }

  function newTime() {
    let number = 0;

    if (current <= repetition) {
      number = 0;
    } else if (current <= (repetition * 2)) {
      // Move to 15-minute intervals
      const quarters = [0, 15, 30, 45];
      number = quarters[rand(0, quarters.length - 1)];
    } else if (current <= (repetition * 4)) {
      // Move to 5-minute intervals
      const intervals = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
      number = intervals[rand(0, intervals.length - 1)];		
    } else {
      number = rand(0, 59);
    }

    const newHour = rand(0, 11); 
    svg.style.setProperty('--start-seconds', 0); 
    svg.style.setProperty('--start-minutes', number);
    svg.style.setProperty('--start-hours', newHour);

    const readableTime = generateTimeString(newHour, number);
    console.log(readableTime);

    const utterance = new SpeechSynthesisUtterance(readableTime);
    utterance.lang = 'en-US';

    speakButton.disabled = true;

    utterance.onend = function () {
      speakButton.disabled = false;
    };

    speechSynthesis.speak(utterance);
    current++;
  }

  function rand(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function generateTimeString(hour, minutes) {
    const adjustedHour = (hour === 0) ? 12 : hour; 
    const nextHour = (hour === 11) ? 12 : (hour + 1) % 12; 

    if (minutes === 0) {
      return `It is ${adjustedHour} o'clock`;
    } else if (minutes === 15) {
      return `It is quarter past ${adjustedHour}`;
    } else if (minutes === 30) {
      return `It is half past ${adjustedHour}`;
    } else if (minutes === 45) {
      return `It is quarter to ${nextHour}`;
    } else if (minutes < 30) {
      return `It is ${minutes} past ${adjustedHour}`;
    } else {
      const remainingMinutes = 60 - minutes;
      return `It is ${remainingMinutes} to ${nextHour}`;
    }
  }
});
</script>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-WebSpeech-3.html&oldid=100744“