JSFiddle - React, Tailwind, and code Playground

by Chun

HTML

https://www.talater.com/annyang/
https://github.com/TalAter/annyang

JavaScript

//<![CDATA[

var $chatStatus = $('#ChatStatus');

var isChromium = window.chrome,
    winNav = window.navigator,
    vendorName = winNav.vendor,
    isOpera = winNav.userAgent.indexOf("OPR") > -1,
    isIEedge = winNav.userAgent.indexOf("Edge") > -1,
    isIOSChrome = winNav.userAgent.match("CriOS");

function runAI(){
	var $el = $('.drmpc');

    if($el.hasClass('active-pulse')) {
        $el.removeClass('active-pulse');
    } else {
        $el.addClass('active-pulse');
        $el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
                function (e) {
            $el.removeClass('active-pulse');
        });
    }

    // if we're recording when the button is clicked
    if(isRecording) {
        annyang.abort();
        isRecording = false;
        $('.speakingStatus').html('MPC Android is now Offline.');
		
		$chatStatus.html('MPC Desativado.');
		msg.text = 'MPC Desativado.';
        speechSynthesis.speak(msg);
    } else {
        annyang.start();
        isRecording = true;
        $('.speakingStatus').html('Say hello MPC');
		
		$chatStatus.html('Diga: Olá MPC');
		msg.text = 'MPC Android Ativado.';
        speechSynthesis.speak(msg);
    }
}


var isRecording = false;
$('.drmpc').on('click', function(event){
    event.preventDefault();
	if(isIOSChrome){
		runAI();
	} else if(isChromium !== null && isChromium !== undefined && vendorName === "Google Inc." && isOpera == false && isIEedge == false) {
		runAI();
	} else {
		$chatStatus.html('Uh Oh! Navegador não suportado.<br/>Use o Google Chrome para experiênciar a Inteligência Artifícial.');
		$chatStatus.animate({'left':'30px'},500);
		setTimeout(function () {
			$chatStatus.animate({'left':'-150vw'},500);
		},6000);
	}
});

$chatStatus.on('click', function(event){
	event.preventDefault();
	$chatStatus.animate({'left':'-150vw'},500);
});

if (annyang) {

    var msg = new SpeechSynthesisUtterance();
    var voices = window.speechSynthesis.getVoices();
    msg.voice = voices[10];...