-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (92 loc) · 3.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Voice Changer</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div id="panel">
<div id="panel-left">
<div class="header color1">Effect</div>
<div class="flex-box">
<div class="card" id="C1">
<img class="card-img" src="./img/BGM_silence.png" />
<p class="card-text">NoChange</p>
</div>
<div class="card" id="C2">
<img class="card-img" src="./img/c_fatboy.png" />
<p class="card-text">FatBoy</p>
</div>
<div class="card" id="C3">
<img class="card-img" src="./img/C_rewind.png" />
<p class="card-text">Rewind</p>
</div>
<div class="card" id="C4">
<img class="card-img" src="./img/C_valleyecho.png" />
<p class="card-text">ValleyEcho</p>
</div>
<div class="card" id="C5">
<img class="card-img" src="./img/C_cuteMonster.png" />
<p class="card-text">CuteMonster</p>
</div>
<div class="card" id="C6">
<img class="card-img" src="./img/C_huaji.jpg" />
<p class="card-text">Guess</p>
</div>
</div>
</div>
<div id="panel-center">
<div class="card-big" id="Record">
<img class="card-img-big" src="./img/record.png" />
</div>
<div class="card-big" id="Play">
<img class="card-img-big" src="./img/play.png" />
</div>
</div>
<div id="panel-right">
<div class="header color2">BGM</div>
<div class="flex-box">
<div class="card" id="M1">
<img class="card-img" src="./img/BGM_silence.png" />
<p class="card-text">Silence</p>
</div>
<div class="card" id="M2">
<img class="card-img" src="./img/BGM_celebrate.png" />
<p class="card-text">Celebrate</p>
</div>
<div class="card" id="M3">
<img class="card-img" src="./img/BGM_folk.png" />
<p class="card-text">Folk</p>
</div>
<div class="card" id="M4">
<img class="card-img" src="./img/BGM_happy.png" />
<p class="card-text">Happy</p>
</div>
<div class="card" id="M5">
<img class="card-img" src="./img/BGM_lyric.png" />
<p class="card-text">Lyric</p>
</div>
<div class="card" id="M6">
<img class="card-img" src="./img/BGM_classical.png" />
<p class="card-text">Classical</p>
</div>
</div>
</div>
</div>
<div style="width:50rem;max-width:100%;margin:1rem auto 0 auto;font-weight:100;white-space:pre;text-align:center;border:1px solid lightblue">
How to use it
1. Click "Record" to start record, click it again to finish record.
2. Choose one effect on the left.
3. Choose one background music on the right
4. Click "Play" to enjoy :)
</div>
<div style="width:50rem;max-width:100%;margin:1rem auto 0 auto;font-weight:100;white-space:pre;text-align:center;border:1px solid lightblue">
SWS3012-40 Wan Xinyi & Wang Kang
https://github.com/12wk34/voicemagic
</div>
<script src="index.js"></script>
</body>
</html>