brettz9/speech.html

## speech.html
<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <title>Speech transcription</title>
        <style>
        #transcriptionResults {
            width: 100%;
            height: 500px;
        }
        </style>
        <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
    </head>
    <body>
        <form id="transcribeAudio" action="">
            <input id="audioInput" type="file" />
            <label>
                Timeout (milliseconds) <small>(Leave empty for no timeout)</small>:
                <input id="audioTimeout" type="number" />
            </label>
            <input type="submit" value="Transcribe" />
            <input type="button" id="pauseAudio" value="Cancel audio" />
        </form>
        <textarea id="transcriptionResults"></textarea>
        <script>
    const $ = (sel) => document.querySelector(sel);
    function beginTranscription (e) {
        const audioInput = $('#audioInput');
        // We read this rather than path as path may be concealed for privacy
        const fReader = new FileReader();
        fReader.readAsDataURL(audioInput.files[0]);
        fReader.addEventListener('loadend', (e) => {
            const audioSource = e.target.result;
            const timeoutValue = $('#audioTimeout').value;
            const timeout = timeoutValue
                ? parseFloat(timeoutValue)
                : null;
            beginAudio({audioSource, timeout});
        });
        e.preventDefault();
    }
    $('#transcribeAudio').addEventListener('submit', beginTranscription);

    function beginAudio ({audioSource, timeout}) {
        const audio = new Audio();
        const recognition = transcribe({audioSource, timeout, audio});
        audio.oncanplay = () => {
            console.log('canplay');
          recognition.start();
          audio.play();
        }
        $('#pauseAudio').addEventListener('click', () => {
            audio.pause();
        });
        audio.src = audioSource;
    }
    function transcribe ({audioSource, timeout, audio}) {
        const recognition = new webkitSpeechRecognition();

        recognition.continuous = true;
        recognition.interimResults = true;
        recognition.onresult = function(event) {
          console.log('event.results[0]', event.results[0]);
          if (event.results[0].isFinal) {
            $('#transcriptionResults').textContent += event.results[0][0].transcript + '\n';
            recognition.stop();
            if (!audio.ended) {
                const recog = transcribe({audioSource, timeout, audio})
                recog.start();
            }
          }
        }

        recognition.onend = e => {
            console.log('ended recog')
        };

        recognition.onerror = e => {
            console.log('error recog')
        };

        recognition.onnomatch = e => {
            console.log('no match recog')
        };
        recognition.onstart = e => {
            console.log('start recog')
        };

        recognition.onspeechstart = e => {
            console.log('speech start recog')
        };
        recognition.onspeechend = e => {
            console.log('speech ended recog')
        };

        recognition.onaudiostart = e => {
            console.log('audio start recog')
        };
        recognition.onaudioend = e => {
            console.log('audio ended recog')
        };


        recognition.onaudiostart = e => {
          console.log("audio capture started");
        }

        recognition.onaudioend = e => {
          console.log("audio capture ended");
        }

        if (timeout != null) {
            setTimeout(() => {
                recognition.stop();
            }, timeout);
        }
        return recognition;
    }
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en-US">
	<head>
	<meta charset="utf-8">
	<title>Speech transcription</title>
	<style>
	#transcriptionResults {
	width: 100%;
	height: 500px;
	}
	</style>
	<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
	</head>
	<body>
	<form id="transcribeAudio" action="">
	<input id="audioInput" type="file" />
	<label>
	Timeout (milliseconds) <small>(Leave empty for no timeout)</small>:
	<input id="audioTimeout" type="number" />
	</label>
	<input type="submit" value="Transcribe" />
	<input type="button" id="pauseAudio" value="Cancel audio" />
	</form>
	<textarea id="transcriptionResults"></textarea>
	<script>
	const $ = (sel) => document.querySelector(sel);
	function beginTranscription (e) {
	const audioInput = $('#audioInput');
	// We read this rather than path as path may be concealed for privacy
	const fReader = new FileReader();
	fReader.readAsDataURL(audioInput.files[0]);
	fReader.addEventListener('loadend', (e) => {
	const audioSource = e.target.result;
	const timeoutValue = $('#audioTimeout').value;
	const timeout = timeoutValue
	? parseFloat(timeoutValue)
	: null;
	beginAudio({audioSource, timeout});
	});
	e.preventDefault();
	}
	$('#transcribeAudio').addEventListener('submit', beginTranscription);

	function beginAudio ({audioSource, timeout}) {
	const audio = new Audio();
	const recognition = transcribe({audioSource, timeout, audio});
	audio.oncanplay = () => {
	console.log('canplay');
	recognition.start();
	audio.play();
	}
	$('#pauseAudio').addEventListener('click', () => {
	audio.pause();
	});
	audio.src = audioSource;
	}
	function transcribe ({audioSource, timeout, audio}) {
	const recognition = new webkitSpeechRecognition();

	recognition.continuous = true;
	recognition.interimResults = true;
	recognition.onresult = function(event) {
	console.log('event.results[0]', event.results[0]);
	if (event.results[0].isFinal) {
	$('#transcriptionResults').textContent += event.results[0][0].transcript + '\n';
	recognition.stop();
	if (!audio.ended) {
	const recog = transcribe({audioSource, timeout, audio})
	recog.start();
	}
	}
	}

	recognition.onend = e => {
	console.log('ended recog')
	};

	recognition.onerror = e => {
	console.log('error recog')
	};

	recognition.onnomatch = e => {
	console.log('no match recog')
	};
	recognition.onstart = e => {
	console.log('start recog')
	};

	recognition.onspeechstart = e => {
	console.log('speech start recog')
	};
	recognition.onspeechend = e => {
	console.log('speech ended recog')
	};

	recognition.onaudiostart = e => {
	console.log('audio start recog')
	};
	recognition.onaudioend = e => {
	console.log('audio ended recog')
	};



	recognition.onaudiostart = e => {
	console.log("audio capture started");
	}

	recognition.onaudioend = e => {
	console.log("audio capture ended");
	}

	if (timeout != null) {
	setTimeout(() => {
	recognition.stop();
	}, timeout);
	}
	return recognition;
	}
	</script>
	</body>
	</html>