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

#作ったもの

###親友(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`を使って作りました。
[こちら](https://kizul1254.github.io/friend/friend.html)で動かすことが出来ます。
**動作確認済ブラウザ**：Google Chrome,Firefox(windows)


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

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

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

* [Web Speech Synthesis API（音声合成API）で遊んでみた - Qiita](https://qiita.com/kyota/items/da530ad22733b644518a)
* [簡単Javascript & jQueryでテキスト読み上げ - Qiita](https://qiita.com/yopisoft/items/35b2dc2cec6016f62f56)
* [Web Speech APIの実装 前編 Speech Synthesis API](https://app.codegrid.net/entry/2016-web-speech-api-1)
* [SpeechSynthesis(MDN Web Docs)](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis)
* [SpeechSynthesisUtterance(MDN Web Docs)](https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesisUtterance)


***


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


<br><br><br><br><br><br><br>
#奮闘記

では成果を発表しプレッシャーから解放されたところで、**親友**[^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部

```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](https://qiita.com/kyota/items/da530ad22733b644518a)
[簡単Javascript & jQueryでテキスト読み上げ - Qiita](https://qiita.com/yopisoft/items/35b2dc2cec6016f62f56)


SpeechSynthesisとSpeechSynthesisUtteranceに関してはこちらに
[Web Speech APIの実装 前編 Speech Synthesis API](https://app.codegrid.net/entry/2016-web-speech-api-1)
[SpeechSynthesis(MDN Web Docs)](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis)
[SpeechSynthesisUtterance(MDN Web Docs)](https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesisUtterance)


てなわけで、この二つを**フュージョン**させると**親友**[^1]の完成です。
<img width="250" alt="friend.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/277386/c9a6006d-0c99-5be4-07c1-90d05e7fb607.png">


地味な服装ですね。では早速を喋らせてみましょう。
<img width="250" alt="bestfriend.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/277386/fe10c48c-1fa6-9e28-314d-3c1cc1c0cfb5.png">

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


#まとめ

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

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



[^1]: 親友…javascriptでは作れるが、リアルでは作成不可能な概念の事