☰

Speach Recognition for lingvist.io

add Speach Recognition to lingvist.io!

目前為 2016-10-13 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Speach Recognition for lingvist.io
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  add Speach Recognition to lingvist.io!
// @author       alexchetv
// @match        https://learn.lingvist.io/
// @grant        none
// ==/UserScript==

(function() {
	'use strict';
	var target = document;
	var head  = document.getElementsByTagName('head')[0];
	var link  = document.createElement('link');
	var answerInput;
	var evt;
	link.rel  = 'stylesheet';
	link.type = 'text/css';
	link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css';
	head.appendChild(link);
	var micActive = false;
	var micButton = document.createElement("Button");
	micButton.style.background = 'transparent';
	micButton.innerHTML = '<i style="font-size:24px" class="fa">&#xf130;</i>';
	micButton.addEventListener("click", function(){
		toggleMic();
	});
	var cardObserver = new MutationObserver(function(mutations) {
		mutations.forEach(function(mutation) {
			if (mutation.target.className =='app-content'){
				mutation.addedNodes.forEach(function(node) {
					if (node.className == 'cards') {
						speech.abort();
						speech.lang = 'en-US';
						if (app.model.GuessModel.question.language == 'fr') {
							speech.lang = 'fr-FR';
						}
						var cardHeader = document.getElementsByClassName('main-card')[0].getElementsByClassName('header')[0];
						answerInput = document.getElementsByClassName('main-card')[0].getElementsByClassName('answer-input')[0];
						if (!answerInput.disabled) {
							cardHeader.style.cssText  = 'justify-content: space-between;flex-direction: row-reverse;';
							cardHeader.insertBefore(micButton, cardHeader.firstChild);
						}
						console.log (window.app);

					}
				});
			}
		});
	});

	// pass in the target node, as well as the observer options
	cardObserver.observe(target, {childList: true, subtree: true});

	var SpeechRecognition = window.mozSpeechRecognition ||
		window.msSpeechRecognition ||
		window.oSpeechRecognition ||
		window.webkitSpeechRecognition ||
		window.SpeechRecognition;
	var speech = new SpeechRecognition();
	speech.continuous = false;
	speech.interimResults = false;

	speech.maxAlternatives = 5;
	speech.onresult = function(event) {
		var variants = Array.from(event.results[0]).map(function(result) {
			return result.transcript.toLowerCase();
		});
		var word = variants[0];
		var answer = app.model.GuessModel.question.word;
		for (var i = 1; i < variants.length; i++) {
			if (answer == variants[i]) {
				word = answer;
			}
		}
		answerInput.value = word;
		if (word == answer) {
			evt = new KeyboardEvent("keypress", {"bubbles":true, "cancelable" : true, "key": "Enter", "code":"Enter", "keyIdentifier":"Enter"});
			Object.defineProperty(evt, 'keyCode', {
				value: 13
			});
			Object.defineProperty(evt, 'which', {
				value: 13
			});
			setTimeout(function(){
				answerInput.dispatchEvent(evt);
			},200);
		}

	};
	speech.onend = function(event) {
		micActive = false;
		micButton.style.color = '#1a3754';
	};

	function startSpeechRecognition() {
		answerInput.value = '';
		speech.start();
	}

	function abortSpeechRecognition() {
		speech.abort();
		answerInput.value = '';
	}

	function toggleMic() {
		micActive = !micActive;
		answerInput.focus();
		if (micActive) {
			startSpeechRecognition();
		} else {
			abortSpeechRecognition();
		}
		micButton.style.color = micActive ? 'red':'#1a3754';
	}
})();