JSFiddle - React, Tailwind, and code Playground

by technik300

HTML

<button class="play-button button" aria-label="Прочитать" title="Прочитать">
  <svg width="100%" height="100%" viewBox="0 0 36 36">
    <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z">
      <animate attributeName="d" class="pause" attributeType="XML" dur="0.15s" begin="none" fill="freeze" from="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z" to="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></animate>
      <animate attributeName="d" class="play" attributeType="XML" dur="0.15s" begin="none" fill="freeze" from="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" to="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z"></animate>
    </path>
  </svg>

		</button>

JavaScript

var speakBtn = document.querySelector('.play-button');
if(speakBtn !== null){
	var synth;
   if( synth = (window.speechSynthesis || window.mozspeechSynthesis || window.webkitspeechSynthesis) !== undefined){
		rCls(footer,'hidden')
		console.dir(synth);
	   synth.onvoiceschanged = function(){
      	var lang = synth.getVoices();
    	};
		var synth = window.speechSynthesis; 
		var message = new SpeechSynthesisUtterance();
    	console.log('Чтение речи поддерживается в данной браузере');
		var spkBtnPath = spkBtn.querySelectorAll('svg path *');
		spkBtn.addEventListener('click',speakBlock);
		for(let i=0;i<block.length;i++){
				//var h2 = block[i].querySelector('h2');//console.log(h2);
            //h2.innerHTML = '<speak>'+h2.innerHTML+'</speak>';
		}

	}else{
    	console.log('Чтение речи не поддерживается в данном браузере');
	}


const utterance = new SpeechSynthesisUtterance('Добрый день!');

const cat = new CustomEvent('animalfound', {
  detail: {name: 'cat'}
});

document.addEventListener('animalfound', function(){
	window.speechSynthesis.speak(utterance);
})

document.dispatchEvent(cat);