-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
141 lines (123 loc) · 5.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Speech PDN</title>
<style type="text/css">
#content
{
margin-left:auto;
margin-right:auto;
width:720px;
}
</style>
<script>
//ロード時に読み込み・イベントモーションを隠す
function charaHide(){
document.getElementById("charaWave").style.display = "none";
document.getElementById("charaGreet").style.display = "none";
document.getElementById("charaSurprise").style.display = "none";
voiceRec(); //音声認識メイン関数を実行
}
var flag_speech = 0;//認識確定状況フラグ
var flag_charaPlay = false; //イベントモーション再生中フラグ
var rtnString; //認識結果格納用
//音声認識メイン関数
function voiceRec() {
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition();
recognition.lang = 'ja'; //認識言語
recognition.interimResults = true; //暫定結果を返す
recognition.continuous = true; //継続的な結果を返す
//音声認識エラー
recognition.onerror = function() {
//認識未確定中でなければ再実行
if(flag_speech == 0)
voiceRec();
};
//音の検出が停止された場合
recognition.onsoundend = function() {
console.log("停止中");
voiceRec();
};
//認識結果が返った場合
recognition.onresult = function(event) {
var results = event.results;
//認識候補をループ
for (var i = event.resultIndex; i < results.length; i++) {
//認識結果確定時
if (results[i].isFinal) {
rtnString = results[i][0].transcript
console.log("【"+rtnString+"】");//確定結果をコンソール表示
//イベントモーション再生中の場合500ミリ秒waitして再度認識
if(flag_charaPlay == true){
setTimeout("voiceRec()", 500);
//キーワード分岐
}else if(~rtnString.indexOf("手を振って")){
var wait=document.getElementById("wait");
var wave=document.getElementById("wave");
wave.play();//イベントモーション再生開始
flag_charaPlay = true;
document.getElementById("charaWait").style.display = "none";//待機モーション消去
document.getElementById("charaWave").style.display = "block";//イベントモーション表示
//イベントモーション再生終了時
wave.addEventListener('ended', function(e){
document.getElementById("charaWave").style.display = "none";//イベントモーション消去
wait.play();//待機モーション再生開始
document.getElementById("charaWait").style.display = "block";//待機モーション表示
flag_charaPlay = false;
voiceRec();//音声認識開始
}, false);
}else if(~rtnString.indexOf("お疲れ")){
var greet=document.getElementById("greet");
greet.play();
flag_charaPlay = true;
document.getElementById("charaWait").style.display = "none";
document.getElementById("charaGreet").style.display = "block";
greet.addEventListener('ended', function(e){
document.getElementById("charaGreet").style.display = "none";
document.getElementById("charaWait").style.display = "block";
flag_charaPlay = false;
voiceRec();
}, false);
}else if(~rtnString.indexOf("緒方")||~rtnString.indexOf("智絵里")||~rtnString.indexOf("ちえり")){
var surprise=document.getElementById("surprise");
surprise.play();
flag_charaPlay = true;
document.getElementById("charaWait").style.display = "none";
document.getElementById("charaSurprise").style.display = "block";
surprise.addEventListener('ended', function(e){
document.getElementById("charaSurprise").style.display = "none";
document.getElementById("charaWait").style.display = "block";
flag_charaPlay = false;
voiceRec();
}, false);
//キーワード一致なし
}else{
voiceRec();
}
//認識未確定時
}else{
console.log("[認識中] " + results[i][0].transcript);//認識状況をコンソール表示
flag_speech = 1;//認識中
}
}
}
flag_speech = 0;
console.log("認識開始");
//音声認識開始
recognition.start();
}
</script>
</head>
<body onLoad="charaHide()">
<br>
<div id="content">
<!--HTML5 video 自動再生の可否はブラウザに依存。iOS版Chrome動作不可-->
<div id="charaWait"><video src="waiting.mp4" width="680" id="wait" autoplay loop muted></video></div>
<div id="charaWave"><video src="waving.mp4" width="680" id="wave" muted></video></div>
<div id="charaGreet"><video src="greeting.mp4" width="680" id="greet" muted></video></div>
<div id="charaSurprise"><video src="surprising.mp4" width="680" id="surprise" muted></video></div>
</div>
</body>
</html>