Add: BouyomiChan connection

app/js/tl/speech.js

@@ -1,4 +1,5 @@
 $voise = null;
+isBouyomi = localStorage.getItem("voice_bouyomi");
 $voiseName = lang.lang_speech;
 $voices = speechSynthesis.getVoices();
 $synthes = new SpeechSynthesisUtterance();
@@ -9,9 +10,12 @@ speechSynthesis.cancel()
 if (!localStorage.getItem("voice_vol")) {
     localStorage.setItem("voice_vol", 1)
 }
-$synthes.rate = localStorage.getItem("voice_speed");
+voiceRate = localStorage.getItem("voice_speed");
-$synthes.pitch = localStorage.getItem("voice_pitch");
+$synthes.rate = voiceRate
-$synthes.volume = localStorage.getItem("voice_vol");
+voicePitch = localStorage.getItem("voice_pitch");
+$synthes.pitch = voicePitch
+voiceVol = localStorage.getItem("voice_vol");
+$synthes.volume = voiceVol
 function say(msgr) {
     msg = voiceParse(msgr);
     var voice = localStorage.getItem("voicebank");
@@ -32,8 +36,21 @@ $repeat = setInterval(function () {
         if (voice) {
             var obj = JSON.parse(voice);
             if (obj[0]) {
-                $synthes.text = obj[0];
+                if (localStorage.getItem("voice_bouyomi")) {
-                speechSynthesis.speak($synthes);
+                    var delim = "<bouyomi>";
+                    var thisVoiceRate = voiceRate * 10 + 70
+                    var thisVoicePitch = voicePitch * 50 + 70
+                    var thisVoiceVol = voiceVol * 100
+                    console.log(thisVoiceRate, thisVoicePitch, thisVoiceVol)
+                    var command = 0x0001;
+                    var type = 0;
+                    var sends = "" + command + delim + thisVoiceRate + delim + thisVoicePitch + delim + thisVoiceVol + delim + type + delim + obj[0];
+                    bouyomiConnect(sends)
+                } else {
+                    $synthes.text = obj[0];
+                    speechSynthesis.speak($synthes);
+                }
+
                 obj.splice(0, 1);
                 var json = JSON.stringify(obj);
                 localStorage.setItem("voicebank", json);
@@ -54,6 +71,11 @@ function voiceToggle(tlid) {
     if (voiceck) {
         localStorage.removeItem("voice_" + tlid);
         speechSynthesis.cancel()
+        if (localStorage.getItem("voice_bouyomi")) {
+            var command = 0x0010;
+            var sends = "" + command;
+            bouyomiConnect(sends)
+        }
         $("#sta-voice-" + tlid).text("Off");
         $("#sta-voice-" + tlid).css("color", 'red');
         parseColumn(tlid);
@@ -78,21 +100,51 @@ function voicePlay() {
     if (speechSynthesis.speaking) {
         speechSynthesis.cancel()
     } else {
-        $synthes.text = $("#voicetxt").val();
+        var text = $("#voicetxt").val();
-        $synthes.rate = $("#voicespeed").val() / 10;
+        var rate = $("#voicespeed").val();
-        $synthes.pitch = $("#voicepitch").val() / 50;
+        var pitch = $("#voicepitch").val()
-        $synthes.volume = $("#voicevol").val() / 100;
+        var vol = $("#voicevol").val()
-        speechSynthesis.speak($synthes);
+        if (localStorage.getItem("voice_bouyomi")) {
+            var delim = "<bouyomi>";
+            rate = rate * 1 + 70
+            pitch = pitch * 1 + 70
+            var command = 0x0001; // コマンドです。0x0001.読み上げ/0x0010.ポーズ/0x0020.再開/0x0030.スキップ
+            /*var speed = 100; // 速度50-200。-1を指定すると本体設定
+            var pitch = 100; // ピッチ50-200。-1を指定すると本体設定
+            var volume = 100; // ボリューム0-100。-1を指定すると本体設定*/
+            var type = 0; // 声質(0.本体設定/1.女性1/2.女性2/3.男性1/4.男性2/5.中性/6.ロボット/7.機械1/8.機械2)
+            var sends = "" + command + delim + rate + delim + pitch + delim + vol + delim + type + delim + text;
+            bouyomiConnect(sends)
+        } else {
+            $synthes.text = text
+            $synthes.rate = rate / 10
+            $synthes.pitch = pitch / 50
+            $synthes.volume = vol / 100;
+            speechSynthesis.speak($synthes);
+        }
     }
 }
 
 function voiceSettings() {
+    var awk = $("[name=bym]:checked").val();
+    if (awk == "yes") {
+        localStorage.setItem("voice_bouyomi", "yes");
+        M.toast({ html: "Bouyomi Chan connection requires WebSocket Plugin", displayLength: 3000 })
+    } else {
+        localStorage.removeItem("voice_bouyomi");
+    }
     localStorage.setItem("voice_speed", $("#voicespeed").val() / 10);
     localStorage.setItem("voice_pitch", $("#voicepitch").val() / 50);
     localStorage.setItem("voice_vol", $("#voicevol").val() / 100);
     M.toast({ html: lang.lang_speech_refresh, displayLength: 3000 })
 }
 function voiceSettingLoad() {
+    var flag = localStorage.getItem("voice_bouyomi");
+    if (flag) {
+        $("#bym_yes").prop("checked", true);
+    } else {
+        $("#bym_no").prop("checked", true);
+    }
     var speed = localStorage.getItem("voice_speed");
     var pitch = localStorage.getItem("voice_pitch");
     var vol = localStorage.getItem("voice_vol");
@@ -108,4 +160,11 @@ function voiceSettingLoad() {
         $("#voicevol").val(vol * 100);
         $("#voicevolVal").text(vol * 100);
     }
+}
+function bouyomiConnect(sends) {
+    var socket = new WebSocket('ws://localhost:50002/');
+    socket.onopen = function () {
+        socket.send(sends);
+    }
+
 }

app/js/ui/layout.js

@@ -269,9 +269,9 @@ function parseColumn(target, dontclose) {
 				')" class="setting nex"><i class="material-icons waves-effect nex" title="' + lang.lang_layout_mediafil + '">perm_media</i><span id="sta-media-' +
 				key + '">On</span></a>' + lang.lang_layout_mediafil + '<br><a onclick="cardToggle(' + key +
 				')" class="setting nex"><i class="material-icons waves-effect nex" title="' + lang.lang_layout_linkanades + '">link</i><span id="sta-card-' +
-				key + '">On</span></a>' + lang.lang_layout_linkana + '<br><a onclick="voiceToggle(' + key +
+				key + '">On</span></a>' + lang.lang_layout_linkana + '<br><a onclick="voiceToggle(\'' + key +
-				')" class="setting nex"><i class="material-icons waves-effect nex" title="' + lang.lang_layout_tts + '">hearing</i><span id="sta-voice-' +
+				'\')" class="setting nex"><i class="material-icons waves-effect nex" title="' + lang.lang_layout_tts + '">hearing</i><span id="sta-voice-' + key + '">' + 
-				key + ',\'' + acct.type + '\'">On</span></a>' + lang.lang_layout_tts + 'TL<br><a onclick="columnReload(' + key +
+				'">On</span></a>' + lang.lang_layout_tts + 'TL<br><a onclick="columnReload(' + key +
 				',\'' + acct.type + '\')" class="setting nex ' + if_misskey_hide + '"><i class="material-icons waves-effect nex" title="' + lang.lang_layout_reconnect + '">refresh</i></a><span>' + lang.lang_layout_reconnect + '</span><br>' + lang.lang_layout_headercolor + '<br><div id="picker_' + key + '" class="color-picker"></div></div><div class="tl-box" tlid="' + key + '"><div id="timeline_' + key +
 				'" class="tl ' + acct.type + '-timeline " tlid="' + key + '" data-type="' + acct.type + '" data-acct="' + acct.domain + '" data-const="' + acct.type + '_' + acct.domain + '"><div id="landing_' + key + '" style="text-align:center">' + lang.lang_layout_nodata + '</div></div></div>'
 			if (numtarget) {

app/view/make/language/bg/setting.json

@@ -152,6 +152,8 @@
   "templete3": "",
   "postartwork": "Attach an Artwork of Spotify",
   "tts": "TTS(text to speech) Preferences",
+  "bouyomi": "BouyomiChan connect",
+  "bouyomiWarn": "Require: BouyomiChan WebSocket Plugin",
   "speed": "Speed",
   "speedwarn": "1-100(default:10)",
   "pitch": "Pitch",

app/view/make/language/cs/setting.json

@@ -152,6 +152,8 @@
   "templete3": "",
   "postartwork": "Attach an Artwork of Spotify",
   "tts": "TTS(text to speech) Preferences",
+  "bouyomi": "BouyomiChan connect",
+  "bouyomiWarn": "Require: BouyomiChan WebSocket Plugin",
   "speed": "Speed",
   "speedwarn": "1-100(default:10)",
   "pitch": "Pitch",

app/view/make/language/de/setting.json

@@ -152,6 +152,8 @@
   "templete3": "",
   "postartwork": "Das Artwork von Spotify anhängen",
   "tts": "Einstellungen Vorlesefunktion",
+  "bouyomi": "BouyomiChan connect",
+  "bouyomiWarn": "Require: BouyomiChan WebSocket Plugin",
   "speed": "Geschwindigkeit",
   "speedwarn": "1-100(Standard:10)",
   "pitch": "Stimmlage",

app/view/make/language/en/setting.json

@@ -152,6 +152,8 @@
   "templete3": "",
   "postartwork": "Attach an Artwork of Spotify",
   "tts": "TTS(text to speech) Preferences",
+  "bouyomi": "BouyomiChan connect",
+  "bouyomiWarn": "Require: BouyomiChan WebSocket Plugin",
   "speed": "Speed",
   "speedwarn": "1-100(default:10)",
   "pitch": "Pitch",

app/view/make/language/ja/setting.json

@@ -152,6 +152,8 @@
   "template3": "",
   "postartwork": "アルバムアートワークを添付する(Spotify)",
   "tts": "読み上げの設定",
+  "bouyomi": "棒読みちゃん連携",
+  "bouyomiWarn": "「棒読みちゃん用のWebSocket受付プラグイン」が必要です。",
   "speed": "読み上げの速さ",
   "speedwarn": "1-100まで、デフォルトは10。",
   "pitch": "読み上げの高さ",

app/view/make/setting.sample.html

@@ -247,10 +247,10 @@
 					id="c3-file"></span><br>
 				<button class="btn waves-effect" style="width:120px;" onclick="customSound(4)">Custom 4</button><span
 					id="c4-file"></span><br>
-					<h5>@@vol@@</h5>
+				<h5>@@vol@@</h5>
-					@@volwarn80@@<br>
+				@@volwarn80@@<br>
-					<p class="range-field"><span id="soundVolVal">80</span><br>
+				<p class="range-field"><span id="soundVolVal">80</span><br>
-						<input type="range" id="soundvol" min="0" max="100" value="80" onchange="customVol()"
+					<input type="range" id="soundvol" min="0" max="100" value="80" onchange="customVol()"
 						style="width:500px; max-width:100%" /></p>
 			</div>
 		</li>
@@ -267,7 +267,8 @@
 						</template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
-								<template v-if="(!check.kirishima || (check.kirishima && kirishima) )&& (!check.quote || (check.quote && quoters))">
+								<template
+									v-if="(!check.kirishima || (check.kirishima && kirishima) )&& (!check.quote || (check.quote && quoters))">
 									<label><input class="with-gap" v-on:click="complete(i,check.value)"
 											v-model="item.setValue" type="radio" v-bind:id="item.id+check.value"
 											v-bind:value="check.value" />
@@ -376,20 +377,35 @@
 				<i class="material-icons">hearing</i>@@tts@@
 			</div>
 			<div class="collapsible-body">
+				<h5>@@bouyomi@@</h5>
+				@@bouyomiWarn@@<a href="https://github.com/xztaityozx/BouyomiChan-WebSocket-Plugin" target="_blank">GitHub</a><br>
+				<label>
+					<input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_yes"
+						value="yes" />
+					<span>@@yes@@</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_no"
+						value="no" />
+					<span>@@no@@</span>
+				</label>
 				<h5>@@speed@@</h5>
 				@@speedwarn@@<br>
 				<p class="range-field"><span id="voicespeedVal">10</span><br>
-					<input type="range" id="voicespeed" min="1" max="100" value="10" onchange="document.getElementById('voicespeedVal').innerText=this.value"
+					<input type="range" id="voicespeed" min="1" max="100" value="10"
+						onchange="document.getElementById('voicespeedVal').innerText=this.value"
 						style="width:500px; max-width:100%" /></p>
 				<h5>@@pitch@@</h5>
 				@@pitchwarn@@<br>
 				<p class="range-field"><span id="voicepitchVal">50</span><br>
-					<input type="range" id="voicepitch" min="0" max="100" value="50" onchange="document.getElementById('voicepitchVal').innerText=this.value"
+					<input type="range" id="voicepitch" min="0" max="100" value="50"
+						onchange="document.getElementById('voicepitchVal').innerText=this.value"
 						style="width:500px; max-width:100%" /></p>
 				<h5>@@vol@@</h5>
 				@@volwarn@@<br>
 				<p class="range-field"><span id="voicevolVal">100</span><br>
-					<input type="range" id="voicevol" min="0" max="100" value="100" onchange="document.getElementById('voicevolVal').innerText=this.value"
+					<input type="range" id="voicevol" min="0" max="100" value="100"
+						onchange="document.getElementById('voicevolVal').innerText=this.value"
 						style="width:500px; max-width:100%" /></p>
 				<h5>@@test@@</h5>
 				<input type="text" style="width:350px" id="voicetxt" value="@@sample@@">
@@ -431,10 +447,10 @@
 		<li>Ctrl+R:
 			<a href="https://astarte.thedesk.top">アスタルテ暇人ランキング</a>を開く
 		</li><br>
-	@@whenSelected@@
+		@@whenSelected@@
-	<li>F:@@fav@@</li>
+		<li>F:@@fav@@</li>
-	<li>B:@@bt@@</li>
+		<li>B:@@bt@@</li>
-	<li>R:@@reply@@</li>
+		<li>R:@@reply@@</li>
 	</div>
 	<button class="btn waves-effect red" style="width:100%; max-width:500px;"
 		onclick="if(confirm('@@resetconfirm@@')){ localStorage.clear(); location.href='index.html'; }"><i
@@ -448,7 +464,8 @@
 	<a href="https://www.patreon.com/cutls" class="btn waves-effect red darken-2"
 		style="width:100%; max-width:500px;"><i class="material-icons left">trending_up</i>@@support@@(Patreon)</a>
 	<a href="https://liberapay.com/cutls" class="btn waves-effect black-text"
-		style="width:100%; max-width:500px; background-color: #f6c915"><i class="material-icons left">trending_up</i>@@support@@(Liberapay)</a>
+		style="width:100%; max-width:500px; background-color: #f6c915"><i
+			class="material-icons left">trending_up</i>@@support@@(Liberapay)</a>
 	<a href="https://docs.thedesk.top" class="btn waves-effect blue darken-2" style="width:100%; max-width:500px;"><i
 			class="material-icons left">list</i>@@help@@/Docs</a>
 	<a href="https://github.com/cutls/TheDesk" class="btn waves-effect black lighten-2"
@@ -466,7 +483,8 @@
 	<a href="oss.html">OSS License@@ossJP@@</a><br>
 	<br>
 	<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018
-		Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a href="https://thedesk.top/priv.html">Privacy
+		Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a
+			href="https://thedesk.top/priv.html">Privacy
 			Policy</a>
 		<br>
 	</span><br>
@@ -481,4 +499,4 @@
 	<script type="text/javascript" src="../../js/platform/pickr.js"></script>
 	<script type="text/javascript" src="../../js/ui/settings.js"></script>
 	<script type="text/javascript" src="../../js/ui/theme.js"></script>
-	<script type="text/javascript" src="../../js/tl/date.js"></script>
+	<script type="text/javascript" src="../../js/tl/date.js"></script>