-
Notifications
You must be signed in to change notification settings - Fork 4
/
rendered_mos.html
137 lines (124 loc) · 6.1 KB
/
rendered_mos.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
<!doctype html>
<html>
<head>
<title>MOS 實驗表單 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"
integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">MOS 實驗</h1>
<p class="lead">合成語音品質評估</p>
<hr class="my-4">
<p>
感謝您參與本次實驗！
</p>
<p>
在這個實驗中，我們使用電腦合成人類語音。
以下的音檔中，包含了真實的錄音以及合成的聲音，並且每句話都有附上文字稿。
請受試者使用耳機聆聽，並根據每個音檔的品質，給予以下幾種評分：
<ul>
<li>１（非常不好）</li>
<li>２（不好）</li>
<li>３（普通）</li>
<li>４（好）</li>
<li>５（非常好）</li>
</ul>
</p>
</div>
</div>
<div class="container" id="form_container">
<form id="theForm" action="http://localhost:8888" method="GET" onsubmit="return preventRepeatedSubmission();">
<div class="form-group">
<label for="name">姓名：</label>
<input class="form-control" type="text" inputmode="text" name="name" required>
<small class="form-text text-muted">必填*</small>
</div>
<div class="form-group">
<label for="mail">電子郵件：</label>
<input class="form-control" type="text" inputmode="email" placeholder="account@example.com" name="mail">
<small class="form-text text-muted">如果中獎，我們將以電子郵件通知您</small>
</div>
<div class="card form-group">
<div class="card-header">問題 1</div>
<div class="card-body">
<p>
<audio controls src="wavs/test1.wav">
Your browser does not support the audio element.
</audio>
</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="q1" id="q1_1" value="5" required>
<label class="form-check-label" for="q1_1">５（非常好）</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q1" id="q1_2" value="4" required>
<label class="form-check-label" for="q1_2">４（好）</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q1" id="q1_3" value="3" required>
<label class="form-check-label" for="q1_3">３（普通）</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q1" id="q1_4" value="2" required>
<label class="form-check-label" for="q1_4">２（不好）</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q1" id="q1_5" value="1" required>
<label class="form-check-label" for="q1_5">１（非常不好）</label>
</div>
</div>
</div>
<div class="card form-group">
<div class="card-header">問題 2</div>
<div class="card-body">
<p>
<audio controls src="wavs/test2.wav">
Your browser does not support the audio element.
</audio>
</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="q2" id="q2_1" value="5" required>
<label class="form-check-label" for="q2_1">５（非常好）</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q2" id="q2_2" value="4" required>
<label class="form-check-label" for="q2_2">４（好）</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q2" id="q2_3" value="3" required>
<label class="form-check-label" for="q2_3">３（普通）</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q2" id="q2_4" value="2" required>
<label class="form-check-label" for="q2_4">２（不好）</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q2" id="q2_5" value="1" required>
<label class="form-check-label" for="q2_5">１（非常不好）</label>
</div>
</div>
</div>
<input type="text" name="formid" value="1" hidden>
<input type="text" name="thank" value="再次謝謝您參與本次實驗！" hidden>
<input class="btn btn-info btn-lg" type="submit" value="提交結果" id="submitBtn">
<p class="text-muted">
<small>如果提交結果時發現繳不出去，請回頭檢查是否有填入姓名、是否每一題都有作答到，謝謝。</small>
</p>
</form>
</div>
<div class="container" style="padding-top: 60px;">
<p class="text-center text-muted">© 台大語音實驗室</p>
</div>
<script type="text/javascript">
function preventRepeatedSubmission() {
document.getElementById('submitBtn').disabled = true;
setTimeout("submitBtn.disabled=false;", 5000);
return true;
};
</script>
</body>
</html>