Spaces:
Runtime error
Runtime error
File size: 12,965 Bytes
3f3bf60 |
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 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--網頁圖示-->
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<style>
/*載入字體*/
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Zen+Maru+Gothic:wght@500&display=swap');
html{
/*設定字體*/
font-family: 'Mochiy Pop One', sans-serif;
font-family: 'Zen Maru Gothic', sans-serif;
/*設定邊界*/
margin-top: 10px;
margin-left: 20px;
/*背景顏色*/
background-color: #f9f7f0;
}
h1{
/*設定字體大小*/
font-size: 70px;
/*設定字和字之間的寬度*/
letter-spacing:4px;
/*設定字的顏色*/
color: #18b7be;
/*設定邊界*/
margin-left: 70px;
}
.box1{
/*設定為彈性盒子，元素從左到右橫向排列*/
display:flex;
/*元素對齊方式*/
justify-content: space-evenly;
}
.box2{
/*設定為彈性盒子*/
display:flex;
/*元素縱向排列*/
flex-direction: column;
/*元素對齊方式*/
justify-content: center;
align-items: center;
}
.box3{
display: none;
}
.use{
/*設定背景顏色*/
background-color:white;
/*設定字體大小*/
font-size: 30px;
/*設定字體顏色*/
color: #072a40;
/*角角的弧度*/
border-radius: 50px;
/*設定邊界*/
padding:0 25px 0 0;
}
.record{
/*設定為彈性盒子*/
display: flex;
/*設定邊界*/
margin-bottom: 30px;
}
button,input{
/*設定字體*/
font-family: 'Mochiy Pop One', sans-serif;
font-family: 'Zen Maru Gothic', sans-serif;
/*設定字體大小*/
font-size: 25px;
/*設定按鈕的框框*/
border:2px #178ca4 solid;
/*設定角角的弧度*/
border-radius: 20px;
/*設定滑鼠樣式*/
cursor: pointer;
/*設定長寬*/
height: 50px;
width: 100px;
/*設定背景顏色*/
background-color:#f9f7f0;
/*設定字體顏色*/
color:#178ca4;
/*設定動畫時間*/
transition-duration: 0.4s;
/*設定邊界*/
margin: 10px;
}
/*滑鼠放到上面的樣式*/
button:hover,input:hover{
/*設定背景顏色*/
background-color: #178ca4;
/*設定字的顏色*/
color: #f9f7f0;
}
/*設定播放器的背景顏色*/
audio::-webkit-media-controls-panel {
background-color: white;
}
/*設定表格樣式*/
table{
/*設為彈性盒子*/
display: flexbox;
/*設定字的大小*/
font-size: 20px;
/*設定寬度*/
width:870px;
/*表格的寬度的決定方式*/
table-layout: fixed;
/*設定字的顏色*/
color: #f9f7f0;
}
@media screen and (max-width:1000px){
h1{
font-size: 25px;
letter-spacing:2px;
text-align: left;
padding-bottom: 0px;
}
li{
font-size: 20px;
}
.box1{
width: 100%;
}
.box2{
display: none;
}
.box3{
display: block;
width: 100%;
text-align: center;
}
}
.pronounce{
font-size:20px;
/*設定字的大小*/
background-color: #178ca4;
/*設定背景的顏色*/
color: #f9f7f0;
/*設定字的顏色*/
}
.pronounce:hover{
background-color: black;
width: 100px;
/*設定背景的顏色*/
}
tr{
text-align: center;
}
</style>
<title>日語發音校正系統</title>
</head>
<body>
<div>
<h1>日語發音校正系統</h1>
</div>
<div class="box1">
<div class="use">
<ul style="list-style-type:none;">
<!--使用說明-->
<li style="font-size: 35px;"><b>方法：</b></li>
<li>1. 允許麥克風的權限</li>
<li>2. 在右側的字表中選擇字詞</li>
<li>3. 按下字表上方的開始鍵</li>
<li>4. 對著裝置念出選擇的字詞</li>
<li>5. 按下完成鍵</li>
<li>6. 可於在播放器確認語音</li>
<li>7. 確認後按下上傳鍵</li>
<li>8. 等待系統的判定結果</li>
</ol>
</div>
<div class="box2">
<!--放錄音、上傳、播放器-->
<div class="record">
<!--錄音按鈕-->
<button class="record-btn" >開始</button>
<!--上傳按鈕-->
<form class="POST" enctype="multipart/form-data" action="{{ url_for('upload_file') }}">
<input type="submit" value="上傳" name="audio" accept="audio/*">
</form>
<!--播放器-->
<audio style="margin: 10px;height: 50px;width: 400px;" controls class="audio-player"></audio>
</div>
<!--字表-->
<table>
<colgroup>
<col span="1" style="background-color: #178ca4;">
<col span="1" style="background-color: #18b7be;">
<col span="1" style="background-color: #178ca4;">
<col span="1" style="background-color: #18b7be;">
<col span="1" style="background-color: #178ca4;">
<col span="1" style="background-color: #18b7be;">
</colgroup>
<caption style="color:#072a40;font-size: 40px;"><b>字表</b></caption>
<tr>
<th>日文</th>
<th>中文</th>
<th>日文</th>
<th>中文</th>
<th>日文</th>
<th>中文</th>
</tr>
<tr>
<td class="pronounce" data-audio="audio/1.mp3">わたし</td>
<td>我</td>
<td class="pronounce" data-audio="audio/2.mp3">わたしたち</td>
<td>我們</td>
<td class="pronounce" data-audio="audio/3.mp3">あなた</td>
<td>你</td>
</tr>
<tr>
<td class="pronounce" data-audio="audio/4.mp3">あのひと</td>
<td>那個人</td>
<td class="pronounce" data-audio="audio/5.mp3">あのかた</td>
<td>那個人-有禮貌</td>
<td class="pronounce" data-audio="audio/6.mp3">みなさん</td>
<td>大家</td>
</tr>
<tr>
<td class="pronounce" data-audio="audio/7.mp3">せんせい</td>
<td>老師</td>
<td class="pronounce" data-audio="audio/8.mp3">きょうし</td>
<td>教室</td>
<td class="pronounce" data-audio="audio/9.mp3">がくせい</td>
<td>學生</td>
</tr>
<tr>
<td class="pronounce" data-audio="audio/10.mp3">かいしゃいん</td>
<td>公司職員</td>
<td class="pronounce" data-audio="audio/11.mp3">しゃいん</td>
<td>職員</td>
<td class="pronounce" data-audio="audio/12.mp3">ぎんこういん</td>
<td>銀行員</td>
</tr>
<tr>
<td class="pronounce" data-audio="audio/13.mp3">いしゃ</td>
<td>醫生</td>
<td class="pronounce" data-audio="audio/14.mp3">けんきゅうしゃ</td>
<td>研究員</td>
<td class="pronounce" data-audio="audio/15.mp3">エンジニア</td>
<td>工程師</td>
</tr>
<tr>
<td class="pronounce" data-audio="audio/16.mp3">だいがく</td>
<td>大學</td>
<td class="pronounce" data-audio="audio/17.mp3">びょういん</td>
<td>醫院</td>
<td class="pronounce" data-audio="audio/18.mp3">でんき</td>
<td>電燈</td>
</tr>
<tr>
<td class="pronounce" data-audio="audio/19.mp3">だれ</td>
<td>誰</td>
<td class="pronounce" data-audio="audio/20.mp3">どなた</td>
<td>誰-有禮貌</td>
<td class="pronounce" data-audio="audio/21.mp3">～さい</td>
<td>~歲</td>
</tr>
<tr>
<td class="pronounce" data-audio="audio/22.mp3">なんさい</td>
<td>幾歲</td>
<td class="pronounce" data-audio="audio/23.mp3">おいくつ</td>
<td>幾歲-有禮貌</td>
</tr>
</table>
</div>
</div>
<div class="box3">
<a href="index3.html" ><button>開始</button></a>
</div>
<script>
const recordBtn = document.querySelector(".record-btn"); //取得錄音按鈕的class name
const player = document.querySelector(".audio-player"); //取得播放器的class name
const Form = document.querySelector('form'); //取得表單(上傳按鈕)
document.addEventListener('DOMContentLoaded', function() {
var pronounceElements = document.querySelectorAll('.pronounce'); // 取得所有帶有 'pronounce' 類別的元素
pronounceElements.forEach(function(element) { // 對每個 'pronounce' 元素添加點擊事件
element.addEventListener('click', function() { // 獲取被點擊元素的 'data-audio' 屬性，即音訊路徑
var audioPath = this.getAttribute('data-audio');
playAudio(audioPath); // 播放該音訊
});
});
});
function playAudio(audioPath) { // 播放音訊的函數
var audio = new Audio(audioPath); // 創建一個新的 Audio 物件，設置音訊路徑
audio.play(); // 播放音訊
}
Form.style.display = 'none'; //隱藏上傳按鈕
player.style.display = 'none'; //隱藏播放器
//許可麥克風
if (navigator.mediaDevices.getUserMedia) {
var chunks = [];
const constraints = { audio: true }; //允許存取audio
navigator.mediaDevices.getUserMedia(constraints).then(
stream => {
console.log("授權成功");
const mediaRecorder = new MediaRecorder(stream);
recordBtn.onclick = () => {
if (mediaRecorder.state === "recording") {
mediaRecorder.stop(); //停止錄音
recordBtn.textContent = "開始"; //改變開始按鈕文字
console.log("finish");
} else {
mediaRecorder.start(); //開始錄音
console.log("...");
recordBtn.textContent = "結束"; //改變結束按鈕文字
}
console.log("state:", mediaRecorder.state);
};
mediaRecorder.ondataavailable = e => {
chunks.push(e.data); //將錄音內容存成blob物件
};
mediaRecorder.onstop = e => {
Form.style.display = ''; //顯示上傳按紐
player.style.display = ''; //顯示播放器
//新建一個blob物件，將剛剛的blob物件存入
var blob = new Blob(chunks, { type: "audio/wav" });
chunks = []; //清空，可以錄製新內容
var audioURL = window.URL.createObjectURL(blob); //為blob物件創造連結，方便播放器使用
player.src = audioURL; //播放器可以播放剛剛的錄音
//若上傳鍵被按下
Form.addEventListener('submit', (event) => {
event.preventDefault();
const uploadurl = "{{ url_for('upload_file') }}"; //獲取上傳資料的目的地資料夾
const formdata = new FormData();
formdata.append('AUDIO',blob,"audio.mp3"); //加入剛剛的錄音檔，key=AUDIO,檔案名稱為audio.mp3
fetch(uploadurl, {
method: 'POST',
body: formdata
}); //將form回傳給flask
console.log("upload successful");
location.href="/result"; //切換到網址'/result'的網頁
});
};
},
() => {
console.error("授權失敗！");
}
);
} else {
console.error("瀏覽器不支持 getUserMedia");
}
</script>
</body>
</html> |