Go to Qiita Advent Calendar 2024 Top
LoginSignup
11
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kizul

英文を繰り返し読み上げてくれる親友をjavascriptで作った

Last updated at Posted at 2019-03-31

#作ったもの

###親友(javascript製)

BestFriend.html
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		
		<script>
			function Speech(){
				// >定数
				const loadvoice = "Google US English"
				
				// >読み上げ設定諸々
				var speechinfo;
				var voicedata;
				var voicedatalist;
				window.speechSynthesis.onvoiceschanged = VoiseLoad;	//音声ロードが行われると、ここにで設定された関数が呼び出される
				
				// >読み上げモード制御
				var speakmode = 0;	//0…停止中 1…読み上げ中
				var buttontxt = ["しゃべる","黙れ！"];
				
				// >HTML上コンポーネントの設定
				var btn = document.getElementById("speech");
				var txt = document.getElementById("speektxt");
				btn.onclick = onclick;
				
				// >ボタンをクリックしたときに格納される、読み上げる文章
				var speechtext = "";
				
				
				// >押された時の状態によって読み上げ/読み上げ停止を行う
				function onclick(){
					speakmode ^= 1;
					
					if(speakmode == 1){
						speechtext = txt.value;
						VoiceReset();
						window.speechSynthesis.speak(speechinfo);
					}else{
						window.speechSynthesis.cancel(speechinfo);
					}
					
					btn.value = buttontxt[speakmode];
					
				}
				
				// >読み上げが終わった後、再度speakを呼び出しリピートする
				function repeat(){
					
					// cancelされた後に呼び出されていたら処理しない
					if(speakmode == 1){
						VoiceReset();	//firefoxだと一度リセットしないと読み上げてくれない
						window.speechSynthesis.speak(speechinfo);
					}
					
				}
				
				// >読み上げ情報のリセット
				function VoiceReset(){
					speechinfo = new SpeechSynthesisUtterance();
					
					if(voice) speechinfo.voice = voice;
					speechinfo.volume = 1.0;
					speechinfo.rate = 1.0;
					speechinfo.lang = "en-US";
					speechinfo.pitch = 1.0;
					speechinfo.text = speechtext;
					
					speechinfo.onend = repeat;
				}
				
				// >音声データのロードを行う
				function VoiseLoad(){
					voices = speechSynthesis.getVoices();
					voice = voices.find(function(voice){return voice.name == "Google US English"});
				}

				VoiseLoad();
				
			}
		</script>
		
	</head>

	<body>

		<p>
			【読み上げさせる文章】<br>
			<input type="text" id="speektxt">
		</p>

		<input type="button" id="speech" onclick = "" value="しゃべる">
		<script>Speech();</script>
	</body>
	
</html>

javascirptとWebSpeechAPIを使って作りました。
こちらで動かすことが出来ます。
動作確認済ブラウザ：Google Chrome,Firefox(windows)

ここから下は親友を作るまでの涙ぐましい奮闘記
もとい駄文の塊なので、興味のある物好きな方以外につきましてはここでこの記事は終了となります。

もしソースコードに突っ込み所などがあれば是非マサカリを投げていただければ幸いです。
ここまで読んで頂きありがとうございました。

##参考にさせて頂いた記事

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 糸冬
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　---------------
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　制作・著作 Ｎ〇Ｋ









#奮闘記

では成果を発表しプレッシャーから解放されたところで、親友1が完成するに至ったまでの経緯と親友1の紹介を書き連ねていこうと思います。

##きっかけ

私は寂しかった、仕事から帰り家に辿り着くといつも一人、PCを開き画面をただただ見つめては過ぎ去っていく日々…
誰かに愛されたかった、心の通じ合える仲間が欲しかった、本音で語り合える仲間が欲しかった…

いつも傍にいて

共に本音で語り合い

時にはケンカしながらも

明日へ向かって

共に切磋琢磨し

共に助け合える

そんな親友が欲しかった…

ところで話は変わるんですが。
プログラミングをやっていると知らない英単語が出てくる事ってよく有りますよね？有りますよね？
そういう時って大概ググってその場は解決するんですけど、それだけだと頭に定着せず数週間後にまた繰り返すって事よく有りませんか？

そこで、作業中に出てきた英語を調べて、ついでにそれを無限に読み上げてくれる親友1を作成して、そのスピーチを作業用BGMにすれば少しは定着するのでは？と考え早速作りました。

##なぜWebSpeechAPI？

  • 楽そうだったから : 8割
  • javascriptいじりたい : 1割
  • その他 : 1割

##親友1の紹介

きっかけを話したところで、次に簡単な紹介に入らせていただきます。

まずはHTML部

VirtualFriend_Body.html
<body>

	<p>
		【読み上げさせる文章】<br>
		<input type="text" id="speektxt">
	</p>

	<input type="button" id="speech" onclick = "" value="しゃべる">
	<script>Speech();</script>
</body>

読み上げさせる文章の入力欄と読み上げ開始のボタンを配置しているだけです。
センスの欠片も無い不愛想な親友1ですが、一度英語を喋らせればとてつもなくハイレベルなセンスを発揮してくれるでしょう(多分)。

次にjavascript部

VirtualFriend_Brain.html
function Speech(){
	// >定数
	const loadvoice = "Google US English"
	
	// >読み上げ設定諸々
	var speechinfo;
	var voicedata;
	var voicedatalist;
	window.speechSynthesis.onvoiceschanged = VoiseLoad;	//音声ロードが行われると、ここにで設定された関数が呼び出される
	
	// >読み上げモード制御
	var speakmode = 0;	//0…停止中 1…読み上げ中
	var buttontxt = ["しゃべる","黙れ！"];
	
	// >HTML上コンポーネントの設定
	var btn = document.getElementById("speech");
	var txt = document.getElementById("speektxt");
	btn.onclick = onclick;
	
	// >ボタンをクリックしたときに格納される、読み上げる文章
	var speechtext = "";
	
	
	// >押された時の状態によって読み上げ/読み上げ停止を行う
	function onclick(){
		speakmode ^= 1;
		
		if(speakmode == 1){ //1. 読み上げ開始
			speechtext = txt.value;
			VoiceReset();
			window.speechSynthesis.speak(speechinfo);
		}else{ //3. 読み上げ終了
			window.speechSynthesis.cancel(speechinfo);
		}
		
		btn.value = buttontxt[speakmode];
		
	}
	
	// >読み上げが終わった後、再度speakを呼び出しリピートする
	function repeat(){
		if(speakmode == 1){ //2. もう一度読み上げ
			VoiceReset();	//firefoxだと一度リセットしないと読み上げてくれない
			window.speechSynthesis.speak(speechinfo);
		}
		
	}
	
	// >読み上げ情報のリセット
	function VoiceReset(){
		speechinfo = new SpeechSynthesisUtterance();
		
		if(voice) speechinfo.voice = voice;
		speechinfo.volume = 1.0;
		speechinfo.rate = 1.0;
		speechinfo.lang = "en-US";
		speechinfo.pitch = 1.0;
		speechinfo.text = speechtext;
		
		speechinfo.onend = repeat;
	}
	
	// >音声データのロードを行う
	function VoiseLoad(){
		voices = speechSynthesis.getVoices();
		voice = voices.find(function(voice){return voice.name == "Google US English"});
	}

	VoiseLoad();
	
}

読み上げる際の手順を軽く説明すると

  1. ボタンクリックで読み上げ開始(onclick)
  2. 読み上げ終わったらもう一度読み上げ(repeat)
  3. もう一度ボタンクリックで終了(onclick)

となっています。

また、読み上げる前の初期化に関しては、上記した参考記事の内以下の物を参考にしました。
詳しくはこちらの方を参照して頂ければ分かりやすいかと思われます。
Web Speech Synthesis API（音声合成API）で遊んでみた - Qiita
簡単Javascript & jQueryでテキスト読み上げ - Qiita

SpeechSynthesisとSpeechSynthesisUtteranceに関してはこちらに
Web Speech APIの実装 前編 Speech Synthesis API
SpeechSynthesis(MDN Web Docs)
SpeechSynthesisUtterance(MDN Web Docs)

てなわけで、この二つをフュージョンさせると親友1の完成です。
friend.PNG

地味な服装ですね。では早速を喋らせてみましょう。
bestfriend.PNG

ちゃんと喋ってくれてます
しゃべる→黙れ！に変わったボタンをポチればすぐさま静かになってくれます。

#まとめ

一度頼むだけで何度も何度も英語を発音してくれる親友1が完成しました。いやぁ友情って素晴らしい！
みんなもWebSpeechAPIで親友1作ろうね！

###メロスとWebSpeechAPIゎ……ズッ友だょ……！！

  1. 親友…javascriptでは作れるが、リアルでは作成不可能な概念の事 ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7 ↩8

11
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?