Speech Synthesisを応用する1

Speech Synthesisを応用。テキストではなく、音声で解説する。

<?php 
	$text = "e-POWERは日産の電気自動車「リーフ」に搭載されている大出力モーターのみで走行します。
トヨタプリウスに代表されるような、これまでのハイブリッド車は、エンジンとモーターのそれぞれを動力として、シーンごとに役割を分担。より効率のいい方を選ぶ、もしくは併用して走行しています。それに対して日産のe-POWERは、モーターのパワーのみで走行し、エンジンは発電専用となっています。したがって、エンジンは動力としては利用されません。まず、ここがハイブリッド車とe-POWERの一番の違いと言えます。";
?>
<h1>日産ノート</h1>
<img src="note.jpg" width="500px"><br>
<input type="hidden" class="text" value="<?php echo $text; ?>">
<button onclick="speak()">解説を聞く</button>
<script>
function speak(){
	var text = document.querySelector('.text').value;
	speechSynthesis.speak(
		new SpeechSynthesisUtterance(text)
	);
}
</script>

日産ノート




おおお、何を言ってるのか全く理解できないが、仕組みはなんとなく悪くはない気がします。

Speech Synthesis

<h1>demo1</h1>
<input class="text" value="web speech apiを使ってみよう">
<button onclick="speak()">speak()</button>
<script>
function speak(){
	var text = document.querySelector('.text').value;
	speechSynthesis.speak(
		new SpeechSynthesisUtterance(text)
	);
}
</script>

下のボタンを押してみてください。

demo1



※type=”hidden”とすれば、inputは非表示にできます。

<?php 
	$weather = "&#91; 東京都の天気概況 &#93; 本州付近は高気圧に覆われています。 【関東甲信地方】 関東甲信地方は、甲信地方は晴れている所もありますが、関東地方はおおむね曇りとなっています。 3日は、高気圧に覆われて晴れますが、湿った空気の影響により、朝晩中心に曇る所があるでしょう。";
?>
<h1>今日の天気</h1>
<?php echo $weather; ?><br>
<input type="hidden" class="text" value="<?php echo $weather; ?>">
<button onclick="speak()">音声再生</button>
<script>
function speak(){
	var text = document.querySelector('.text').value;
	speechSynthesis.speak(
		new SpeechSynthesisUtterance(text)
	);
}
</script>

ぎゃーーー　素晴らしいですね。

テキストを音声(mp3)にする

view

<?php  
include 'voicetext.php';
?>
<style>
.form{
	width:500px;
}
</style>
<body>
<span>テキストを入力してください</span><br>
<form id="form" name="form" action="" method="POST">
<input id="input_text" type="text" class="form" name="input_text" value="">
<button type="submit">変換する</button>
</form>

<span>変換した音声を再生する</span><br>
<audio id="audio" controls>
<source src="voice.mp3">
</audio><br>
<input type="button" value="play" onclick="audio_play()">
<input type="button" value="pause" onclick="audio_pause()">
<script type="text/javascript">
function audio_play() { audio.play();}
function audio_pause() { audio.pause();}
</script>

voicetext.php
hikariの声を使います。
https://cloud.voicetext.jp/webapi/docs/api
curl

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://api.voicetext.jp/v1/tts");
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$authorized = "do not watch";
curl_setopt($ch,CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt($ch,CURLOPT_USERPWD,$authorized);
$post_array = array("text" => $_POST["input_text"], "speaker" => "hikari", "emotion" => "happiness", "pitch" => "80", "emotion_level" => "4");
$postdata = "";
foreach ($post_array as $key => $val){
	$postdata.= urlencode($key) . '=' . urlencode($val). '&';
}
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $postdata);
$output = curl_exec($ch);
curl_close($ch);
$fp = fopen("voice.mp3","w");
fwrite($fp, $output);
fclose($fp);

browser

mp3

HOYA株式会社:光学機器・ガラスメーカー
東京都新宿区西新宿6-10-1 日土地西新宿ビル 20F
代表：鈴木洋

天気予報RSSをmp3に変換してみます。
テキスト:[ 東京都の天気概況 ] 本州付近は高気圧に覆われています。 【関東甲信地方】 関東甲信地方は、甲信地方は晴れている所もありますが、関東地方はおお むね曇りとなっています。 3日は、高気圧に覆われて晴れますが、湿った空気の影響により、朝晩中 心に曇る所があるでしょう。

笑）これは、ちょっと違う 〇やってる人みたいですね。

emotionとemotion levelをなくします。

ほう

cloud speech api

Web Speech API:音声認識に使うマイクはvagrantでは許可されない！？

<div id="content">
      <input type="textarea" id="q" name="q" size=60>
      <input type="button" value="Click to Speak" onclick="recognition.start()">
</div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script>
var recognition = new webkitSpeechRecognition();
  recognition.onresult = function(event) {
  if (event.results.length > 0) {
    q.value = event.results[0][0].transcript;
  }
}
</script>

192.168.33.10:8000ではマイクがブロックされます。

chromeのhelpページを見ても、解決する記載がなし
https://support.google.com/chrome/answer/2693767?hl=ja

仕方ないので、さくらで共有sslの環境で試してみます。

sslを設定すると、許可のポップアップが表示される

おおお、すげー、感動した！

どうもhttp通信だと、セキュリティ的にマイクはダメのようですね。
また、mp3ファイル(TRF ez do dance)を再生して、歌詞を表示させようとしましたが、audio再生をそのままテキストにすることはできませんでした。残念。

電話番号を発信する

tel:を使います。

<?php 

$fname = $_SERVER&#91;'PHP_SELF'&#93;;
$number = substr($fname, 1, 12);
?>
<a href="tel:<?php echo $number; ?>"><?php echo $number; ?></a>

iphoneで試してみましたが、上手くいきました。

電話番号の情報を表示

googleで「ぎんざ姿 電話番号」を打ち込むと、

一発で出てくる。。終わった。

ファイル名を取得して表示する

echo $_SERVER['PHP_SELF'];

1文字目～13文字目をslice

$fname = $_SERVER['PHP_SELF'];
echo substr($fname, 1, 12);

ファイルを複製する

$i = 1;
$copy = '03-3567-000'.$i.'.php';
copy('03-3567-0003.php', $copy);

03-3567-0001.php の中身のコードも、03-3567-0003.phpと同じものになっています。

ファイルを複数複製する

for($i = 0; $i < 10; $i++){
	$copy = '03-3567-000'.$i.'.php';
	if(!file_exists($copy)){
	copy('03-3567-0003.php', $copy);	
	}
}

これ、何百万のphpファイルと何百万のmysqlレコードをつくるのか！？

phpで郵便番号から住所を取得

$zip = "1530042";
$base_url = "http://zipcloud.ibsnet.co.jp/api/search?zipcode=".$zip."";
$json = file_get_contents($base_url);
print_r('<pre>');
var_dump($json);
print_r('</pre>');
$arr = json_decode($json, true);
echo $arr['results'][0]['address1']. "<br>";
echo $arr['results'][0]['address2']. "<br>";
echo $arr['results'][0]['address3'];

string(293) “{
“message”: null,
“results”: [
{
“address1”: “東京都”,
“address2”: “目黒区”,
“address3”: “青葉台”,
“kana1”: “ﾄｳｷｮｳﾄ”,
“kana2”: “ﾒｸﾞﾛｸ”,
“kana3”: “ｱｵﾊﾞﾀﾞｲ”,
“prefcode”: “13”,
“zipcode”: “1530042”
}
],
“status”: 200
}”
東京都
目黒区
青葉台

検索ページをスタイリング

sumo

リクナビ

吉本タレント検索

レコチョク検索

amazon

zozo

model search

model town:http://www.modeltown.jp/index.php?app_controller=search&type=items&run=true
モデルタウンすげーな、髪型で検索できんのかよ！めっちゃいいやんけ。
私も機械学習の画像認識で、髪型登録して、髪型検索のサービス作りたいです。。。。

初期画面

シンプルだが及第点ってところか？

OK,　悪くない

後は、メール受信画面を成形

ほぼ出来たか？

入力フォームをスタイリング

戦後のスカイラインのデザインはかっこよかったが、やはり、デザインはその時の時代背景が出ますね。。

<style>
.submit1 {
	height:30px;
	margin-top:5px;
	padding-right:15px;
	padding-left:15px;
	background-color:#0099FF;
	color:#fff;
	border:0px;
}
.submit1:active {
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    border-bottom: none;
}
.form2{
	height:30px;
}
textarea{
	padding-top:5px;
}
</style>

<form action="?compose=done" method="post" enctype="multipart/form-data">
			<br>
			<input type="text" class="form2" name="to" size="80%" value="<?php echo $to; ?>" placeholder="　宛先　※必須"  required><br>
			<br>
			<input type="text" class="form2" name="subject" value="<?php echo $subject; ?>" placeholder="　件名" size="80%"><br>
			<br>
			<textarea placeholder="　メッセージを入力してください　※必須"　name="body" rows="12" cols="82%" required></textarea>
			</p>
			<input type="file" id="files" name="files&#91;&#93;" multiple />
			<div id="caution">
			※送信できるファイルの拡張子は"gif","jpg","jpeg","png"の何れかです。<br>
			※ファイル送信は最大2つまでです。3つ以上選択しても、3つ目以降は送れません。また、二つのファイルを送信する場合は、キーボードの"ctl"ボタンなどで二つ選択した状態で開いてください。</div>
			<output id="list"></output>
			<p>
			<input type="submit" class="submit1" value="送信">
			</form>

なんか、hrがしょぼいですな。。

あ、hrもcssでスタイリングできるんですね♪

hr{
	height: 2px;
	background-color: #F8F8FF;
	color: #F8F8FF;
}

割といい

メールボックスをスタイリング

headerをつくっていきます。

.header-wrap{
	background-color:#222222;
	margin-bottom:10px;
}
.title-wrap{
   display:inline-block;
   vertical-align: bottom;
}
.title-wrap h1 {
	font-size:23px;
	padding-top:0px;
	padding-left:15px;
	margin-bottom:0px;
	color:#fff;
}
.title-wrap h2 {
	font-size:14px;
	margin-top:0px;
	padding-left:15px;
	padding-bottom:5px;
	color:#fff;
}
.out {
	display:inline;
	vertical-align: bottom;
	font-size:12px;
	float:right;
	padding-top:15px;
	padding-right:15px;
	color:#fff;
}

もう少し細くします。

flex-1, flex-2にヘッダーをつけます。

.side{
	height:12px;
	background-color:#E6FFE9;
}
.main{
	height:12px;
	background-color:#F5FFFA;
}

ul, li要素のlist-styleをnoneにします。

ul{
	list-style:none;
}
li{
	margin:7px;
}

まぁまぁOK

ログアウト画面の表示

<?php 

require("auth.php");
$auth = new Auth();
$auth->logout();

?>
お待ちください...
<script>
setTimeout(function(){
	window.location.href = "login.php";
}, 600);
</script>

gmailと一緒で、特にスタイリングはなしでOKですね。settimeは600msくらいにしておきます。

さあ、次は、form周りでしょうか。