Canvas, не работает голосовое управление

Question

Прошу помочь с анимированной кнопкой. При нажатии должно включаться голосовое управление шариком. Но почему-то данная функция не работает

<!DOCTYPE html>
<html>
<meta charset="UTF-8">

<title>Mayatnik</title>
<link rel="stylesheet" href="main.css">
<h1 style='text-align: center'> Управляй "Снитчем" </h1>
<h2 style='text-align: center'> Команды: Вверх, вниз, влево, напрaво. </h2>
<div class="switch">
  <input type="checkbox">
</div>

<head>

  <style>
    #canvas {
      display: block;
      margin: 0 auto;
      padding: 0;
    }
    
    body {
      background-image: url(987396a6d03978b643eddd97f0daf8f2.jpg);
      background-repeat: repeat-x, repeat-x;
      background-position-x: 40%;
      background-position-y: 5%;
      background-size: 100%;
    }
    
    {
      margin: 0;
      padding: 0;
      background: #141414;
    }
    
    .switch {
      position: absolute;
      display: flex;
      top: 53%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    input[type="checkbox"] {
      position: relative;
      width: 80px;
      height: 30px;
      -webkit-appearance: none;
      outline: none;
      background: #fff0f5;
      border-radius: 20px;
      transition: 0.5s;
    }
    
    input:checked[type="checkbox"] {
      background: #faafc4;
    }
    
    input[type="checkbox"]:before {
      content: '';
      position: absolute;
      width: 40px;
      height: 40px;
      transform: scale(1.1);
      border-radius: 50%;
      top: -5px;
      left: 0;
      background: #faafc4;
      transition: 0.5s;
    }
    
    input:checked[type="checkbox"]:before {
      background: #f77ea0;
      left: 40px;
    }
  </style>

</head>

<div id="center">
  <canvas id=canvas width="350" height="350"></canvas>
</div>

<script type="text/javascript">
  var recognizer = new webkitSpeechRecognition();
  recognizer.interimResults = true;
  recognizer.lang = "ru-Ru";
  recognizer.onresult = function(event) {
    var result = event.results[event.resultIndex];

    if (result.isFinal && result[0].transcript == "влево") {
      let timerId = setInterval(function() {

        draw();

        if (x > 0) {
          x = x - 2;
        } else clearTimeout(timerId);
      }, 20);
    }
    if (result.isFinal && result[0].transcript == "вверх") {
      let timerId = setInterval(function() {

        draw();

        if (y > 0) {
          y = y - 2;
        } else clearTimeout(timerId);
      }, 20);
    }
    if (result.isFinal && result[0].transcript == "вниз") {
      let timerId = setInterval(function() {

        draw();

        if (y < 350) {
          y = y + 2;
        } else clearTimeout(timerId);
      }, 20);
    }
    if (result.isFinal && result[0].transcript == "направо") {
      let timerId = setInterval(function() {

        draw();

        if (x < 350) {
          x = x + 2;
        } else clearTimeout(timerId);
      }, 20);
    } else {
      console.log('Промежуточный результат:', result[0].transcript);
    }
  };

  function speech() {
    recognizer.start();
  }
</script>

<script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  var x = 175;
  var y = 175;

  requestAnimationFrame(draw);


  function draw() {

    var size = Math.min(canvas.width, canvas.height);
    var rBall = size * 0.03;


    context.clearRect(0, 0, canvas.width, canvas.height);
    drawBg(context, canvas.width, canvas.height);
    drawBase(context, canvas.width);

    drawBall(context, x, y, rBall);

    requestAnimationFrame(draw);
  }

  function drawBg(context, w, h) {
    context.fillStyle = "rgba(255,255,255,0.51)"
    context.fillRect(0, 0, w, h);
    context.fillStyle = "yellow";
  }

  function drawBase(context, w) {
    context.save();
    context.moveTo(0, 2);
    context.lineTo(w, 2);
    context.restore();
  }

  function drawBall(context, x, y, rBall) {
    context.save();
    context.beginPath();
    context.arc(x, y, rBall, 0, Math.PI * 2);
    context.fill();
    context.restore();
  }
</script>

</html>

БЛОГ НА HUSL

Canvas, не работает голосовое управление

Ответы (0 шт):