タイピングの音声出力ソフトをHTMLで組んでみた。ってかchatGPTが。。。

今回はちょっと凄いです。

何がスゴイかと言うと、タイピングだけで会話が出来ちゃうソフトを作りました。

タイピングが出来る方ならもう声を出さないでも、相手に意思を伝える事が出来ちゃいますね！

まあ、言葉は一本調子ですが、これくらいならまあOKだと思います。

それでは（chatGPTが作った）プログラムの公開です。

※このプログラムはあくまでもサンプル的に作ったものなのでこれを使ったことによる損害等につきましては責任を持ちません。自己責任でお使いください。
※パソコンの仕様によっては音声が出てこないことも有るかもしれません。そこまではチェックしていないので改修はご自分で行ってください。
※MacOSでのテストは行っておりません。Windowsパソコンで動かしてください。

どんな事が出来るプログラムなのか？
1. 音声の出し方
chatGPTで作ったのはどんなHTMLプログラミングなのか？
プログラムの動かし方
まとめ
1. 関連

どんな事が出来るプログラムなのか？

それでは、このプログラムについての解説をしていこうと思います。

このプログラムはchatGPTにプロンプトを与えて作成したHTMLプログラムです。

画面より入力した文字列を音声出力するだけのものです。

従って、風邪などで声が出せない人には使い道はあるかもしれませんね。

音声の出し方

音声は文字列を打ち終わって、最後のEnterキーを押すと発音されます。

文字変換にEnterキーを使っている事もあるので最後は2回Enterキーを押すことになります。

そうする事で音声出力は出来ます。

chatGPTで作ったのはどんなHTMLプログラミングなのか？

以下がプログラムコードになります。

こちらはフリーですのでコピーして使ってもらって構いません。

※当プログラムの利用によるいかなる責任も取れませんので、その点ご了承くださいませ。

ソースコードはこれ

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>タイピング音声出力ソフト</title>
</head>
<body>
	<h1>タイピング音声出力ソフト</h1>
	<textarea id="input" rows="5" cols="80"></textarea>
	
	<audio id="audio"></audio>

	<script>
		// Enterキーが押されたら、入力内容を発音する
		document.getElementById("input").addEventListener("keyup", function(event) {
			if (event.keyCode === 13) {
				var input = document.getElementById("input").value;
				speak(input);
				document.getElementById("input").value = "";
			}
		});

		// 入力した文字列を音声で出力
		function speak(text) {
			var audio = document.getElementById("audio");
			var synth = window.speechSynthesis;
			var utterance = new SpeechSynthesisUtterance(text);
			synth.speak(utterance);
		}
	</script>
</body>
</html>