<html>

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="./styles.css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <h1 class="myTitle"><a href="https://blog.obyte.it/" target="_blank">Obyte</a></h1>
  
  <!-- The important html part -->
  <button id="recognize" class="btn btn-primary">Recognize me</button>
  <p id="recognized"></p>
</body>

</html>
h1.myTitle {
  background: #236965 url("https://tools.obyte.it/img/idrobyte/logo_sfera.svg")
    no-repeat;
  background-position: 2px 2px;
  margin: 0 0 10px;
  padding: 0 0 0 60px;
  background-size: 45px;
  line-height: 46px !important;
}
h1.myTitle a {
  color: white;
  font-family: Verdana;
  font-size: 20px;
  text-decoration: none;
  &:hover {
    color: #ddeedd;
  }
}
View Compiled 
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognize = new SpeechRecognition();

recognize.onstart = () => {
  console.log('Recording...');
};

recognize.onspeechend = () => {
  console.log('...stop recording.');
};

const recognized = document.getElementById('recognized'); // Output text

recognize.onresult = event => {
  const current = event.resultIndex;
  const result = event.results[current][0].transcript;
  recognized.textContent = result;
  console.log('Result:', result);
};

const recognizeBtn = document.getElementById('recognize'); // Input button
recognizeBtn.addEventListener('click', () => {
  recognize.start();
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.