<div id="voice-status" style="display:none;">
	音声認識中...（何か喋ってみて）
</div>
↓認識結果 うまく機能しなかったらごめんなさい
<div id="voice-text" style="border: 1px solid #dddddd;padding: 10px;min-height:10px;"></div>
<button id="voice-st-btn" style="float: left;margin-right: 10px;">音声認識を開始するよ</button>
<button id="submit-btn">送信</button>

<script>
	window.onload = function() {
	  document.getElementById('voice-st-btn').onclick = function() {
	  	voice_recognition_start();
	  }
	};

	function voice_recognition_start () {
		document.getElementById('voice-status').style.display = "block";
		recognition.start();
	}

	function voice_recognition_end () {
		document.getElementById('voice-status').style.display = "none";
		recognition.stop();
	}

	window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
	let recognition = new webkitSpeechRecognition();
	recognition.lang = 'ja';
	
	recognition.onresult = function(event){
		document.getElementById('voice-status').style.display = "none";

	    var results = event.results;
	    for (var i = event.resultIndex; i < results.length; i++)
	        document.getElementById('voice-text').innerHTML = results[i][0].transcript;
	}

	recognition.onaudioend = () => {
	  document.getElementById('voice-status').style.display = "none";
	}
</script>
				
			

				
<textarea id="input-text" style="width: 100%;margin-top: 10px;">マイクテス、マイクテス</textarea><br>
<button id="speak-btn">喋らせる</button>

<script>
	window.onload = function() {
	  document.getElementById('speak-btn').onclick = function() {

	  	const text = document.getElementById('input-text').value;
	  	if (text) {
	  		const uttr = new SpeechSynthesisUtterance();
	    	uttr.text = text;
	    	// 音声を出力
	    	window.speechSynthesis.speak(uttr);
	    	console.log(text);
	  	} else {
	  		alert('喋らせたい内容を入力してください');
	  	}

	  }
	};
</script>