-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
118 lines (94 loc) · 8.26 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Project Aqua</title>
<link rel="stylesheet" type="text/css" href="./style/style.css" charset="utf-8"/>
</head>
<body>
<div class="Main">
<div class="Title">
<div class="TitleLeft" style="display: flex; align-items: center; justify-content: flex-start;">
<img src="./doc/logo.png" width="100px">
<div style="font-size: 14px; font-weight: bold; color:#8b8e9866; margin-left: 3px;"> · MP3 Encoder</div>
</div>
<div style="display: flex; align-items: center;">
<svg style="margin-right: 3px;" class="icon" viewBox="-256 -256 1536 1536" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M512 987.98832499c-28.93231393 0-52.60387089-23.67155697-52.60387089-52.60387089V80.57864127c0-28.93231393 23.67155697-52.60387089 52.60387089-52.60387089s52.60387089 23.67155697 52.60387089 52.60387089v854.80581283c0 28.93231393-23.67155697 52.60387089-52.60387089 52.60387089zM288.43570628 832.80770725c-28.93231393 0-52.60387089-23.67155697-52.60387088-52.60263801V248.90930207c0-28.93108103 23.67155697-52.602638 52.60387088-52.60263799s52.602638 23.67155697 52.602638 52.60263799v531.29576717c0 28.93108103-23.67155697 52.602638-52.602638 52.60263801zM64.87017967 693.40936037c-28.93108103 0-52.602638-23.67155697-52.602638-52.60387089V401.46015779c0-28.93231393 23.67155697-52.60387089 52.602638-52.60387089S117.47405056 372.52784386 117.47405056 401.46015779V640.80548948c2.62976203 28.93231393-21.04179494 52.60387089-52.60387089 52.60387089z m894.25964066 0c-28.93231393 0-52.60387089-23.67155697-52.60387089-52.60387089V401.46015779C906.52594944 372.52784386 930.19750641 348.8562869 959.12982033 348.8562869s52.602638 23.67155697 52.602638 52.60387089V640.80548948c0 28.93231393-23.67155697 52.60387089-52.602638 52.60387089zM738.19528863 830.17794522c-28.93231393 0-52.60387089-23.67155697-52.60387088-52.6038709V246.27954004c0-28.93231393 23.67155697-52.60387089 52.60387088-52.60387089s52.602638 23.67155697 52.602638 52.60387089v531.29453428c0 28.93231393-23.67155697 52.60387089-52.602638 52.6038709z" fill="#707070"></path></svg>
<div class="Switch" data-state="0" id="canvasSwitch">
<div class="SwitchSlider"></div>
</div>
<svg style="margin-left: 3px;" class="icon" viewBox="-256 -256 1536 1536" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M30.562462 963.111385h1041.644307c16.856615 0 30.562462 13.705846 30.562462 30.483692a30.562462 30.562462 0 0 1-30.562462 30.404923H30.562462A30.562462 30.562462 0 0 1 0 993.595077c0-16.777846 13.705846-30.483692 30.562462-30.483692zM152.418462 480.492308h122.407384c16.856615 0 30.562462 13.390769 30.562462 29.932307v300.740923c0 16.541538-13.705846 29.932308-30.562462 29.932308H152.418462a30.326154 30.326154 0 0 1-30.641231-29.932308V510.424615c0-16.541538 13.784615-30.011077 30.641231-30.011077zM491.283692 0h122.486154c16.777846 0 30.562462 13.469538 30.562462 29.932308v781.390769c0 16.541538-13.784615 30.089846-30.562462 30.089846H491.283692a30.326154 30.326154 0 0 1-30.562461-30.011077V29.932308c0-16.541538 13.705846-30.011077 30.562461-30.011077z m336.659693 241.348923h122.407384c16.856615 0 30.641231 13.390769 30.641231 30.168615v542.011077c0 16.541538-13.784615 30.011077-30.641231 30.011077h-122.407384a30.326154 30.326154 0 0 1-30.562462-29.932307V271.438769c0-16.699077 13.705846-30.168615 30.562462-30.168615z" fill="#707070"></path></svg>
</div>
</div>
<div class="Block" style="display: flex; justify-content: flex-start; align-items: center; flex-direction: row;">
<div class="WebsocketStatusIndicator" id="ws_status">点击连接WebSocket</div>
<div id="VideoSelector" style="display: none; margin-left: 10px; font-size: 11px;">选择SV视频文件：<input class="VideoInput" type="file" id="videoFileSelector" name="video_files" multiple></div>
</div>
<div class="Block">
<div class="InputButton" id="inputButton">
<!-- <canvas id="osc" class="Osc" height="240" width="1152"></canvas> -->
<canvas id="spectrogram" class="Osc"></canvas>
<input type="file" id="fileSelector" name="files" multiple class="Input">
<div id="inputButtonLabel" class="InputButtonLabel">
<div style="line-height: 0px; margin-top: 35px;">
<svg t="1590511838623" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M777.846 119.65l-422.479 80.896c-22.016 4.333-37.809 23.592-37.77 45.923v449.339c-33.83-13.588-78.06-13.706-121.068 2.836-73.925 28.435-116.066 95.271-94.168 149.267 21.897 53.957 99.564 74.713 173.45 46.277 62.345-24.024 102.124-75.303 99.879-123.195V360.212l371.712-71.208V602.9c-33.792-13.627-78.14-13.785-121.147 2.796-73.886 28.475-115.988 95.31-94.13 149.268 21.898 53.957 99.486 74.712 173.332 46.277 61.204-23.592 100.628-73.531 99.88-120.675h0.157V142.572a23.237 23.237 0 0 0-27.57-22.922z" fill="#c6c8ce"></path></svg>
</div>
<div style="line-height: 1.5;">点击选择输入文件，或者直接拖放至这里<br>Click to select a input file, or drag and drop it here.</div>
</div>
</div>
<div style="text-align: left; margin: 20px 0 40px 0;">
<div class="BitrateSwitchContainer" style="display: none;">
<div id="br64k" class="BitrateSwitch BitrateSwitch_Left">64 kbps</div>
<div id="br128k" class="BitrateSwitch">128 kbps</div>
<div id="br224k" class="BitrateSwitch">224 kbps</div>
<div id="br320k" class="BitrateSwitch BitrateSwitch_Right">320 kbps</div>
</div>
<div style="height: 20px;">
<span id="timer" class="Timer" style="float: left;"></span>
<span id="speed" class="Timer" style="float: right;"></span>
</div>
<div id="play" class="PlayButton" data-state="stopped" disabled="disabled" style="display: none;">
<span id="playButtonLabel" style="padding: 0 10px;">开始编码</span>
<div id="progressbar" style="height: 100%; background: #66ccff; width: 0px;"></div>
</div>
</div>
<div style="color: #888c93; font-size: 11px;">
<div>MP3 FIFO = <span id="mp3_fifo_length">--</span></div>
<div>PCM FIFO = <span id="pcm_fifo_length">--</span></div>
</div>
<!--
<div class="Border"></div>
<details class="NoteContainer">
<summary class="NoteTitle">说明</summary>
<div class="Note">浏览器会将采样率转换为声卡采样率<br>默认码率为320kbps，可在<code>shell.js</code>中修改<br>倍速为单帧编码瞬时倍速，不计绘图时间<br>声谱图绘制会严重降低运行速度<br>未实现自动回放增益</div>
</details>
-->
</div>
<footer class="Footer">
<div style="text-align: center;"><a style="border-bottom: none;" href="https://github.com/bd4sur/Aqua"><img alt="GitHub stars" src="https://img.shields.io/github/stars/bd4sur/Aqua?style=social"></a></div>
<div class="Copyright">Copyright © 2019-2023 <a href="https://bd4sur.com" target="_blank">BD4SUR</a></div>
</footer>
</div>
<script src="./lib/jquery.min.js"></script>
<script src="./lib/canvas.js"></script>
<script src="./lib/filesaver.js"></script>
<script src="./lib/mp3-decoder.js"></script>
<!--以下按照各个模块之间依赖关系的拓扑排序排列-->
<script src="./src/common.js"></script>
<script src="./src/player.js"></script>
<script src="./src/fft.js"></script>
<script src="./src/psy.js"></script>
<script src="./src/subband_filter.js"></script>
<script src="./src/huffman.js"></script>
<script src="./src/mdct.js"></script>
<script src="./src/reservoir.js"></script>
<script src="./src/qloop.js"></script>
<script src="./src/stream.js"></script>
<script src="./src/decoder.js"></script>
<script src="./src/encoder.js"></script>
<script src="./src/spectrogram.js"></script>
<script src="./src/transmitter.js"></script>
<script src="./src/shell.js"></script>
</body>
</html>