-
Notifications
You must be signed in to change notification settings - Fork 0
/
bpm.html
146 lines (129 loc) · 7.64 KB
/
bpm.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
142
143
144
145
146
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Vocaloid学习制作群 - 一个刚刚起步的V家小群</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/pages/index.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.all-hidden { display: none; }
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">VOCALOID学习制作群</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html">首页 <span class="sr-only">(current)</span></a></li>
<li class='active'><a href="resources.html">资源</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">成员简介 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-header">群主</li>
<li><a href="members/index.html">想要假装自己不是群主的某昨</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">管理员</li>
<li><a href="#">小P</a></li>
<li><a href="ai_status.html">(AI)Capricorna</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">活跃成员</li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="尚未开发完毕">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com/vmgroup">Github主页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">我群的表情包</a></li>
<li><a href="http://www.yesterday17.cn/category/vmgroup_daily/">我大V群的日常(连载)</a></li>
<li><a href="portalold/index.html">回到旧版</a></li>
<li role="separator" class="divider"></li>
<li><a href="http://yesterday17.aliapp.com">某昨的迷の小屋</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="page-header">
<h1 style="padding-left:50px">Better Patter Meter <small id='more-heading'>精确、可变速的曲速测试仪♪(v^_^)v</small></h1>
</div>
<div id='panel-instructions' class="panel panel-default alert-" role='alert'>
<div class="panel-body" style="background:#FFEECC">
<button type="button" class="close" aria-label="Close" id='btn-close-instructions' style='font-size: 3em;'><span aria-hidden="true">×</span></button>
Version 0.97.4 (2016.02.27)
<h3>使用说明(戳右边可以关闭)</h3>
写得很乱的样子……玩玩大概就知道了吧-_-#<br><br>
<ol>
<li>掏出普通的耳机,普通地按下播放键,普通地打开这个页面√</li>
<li>跟着普通的节奏,在普通的动次打次中交替按下“Z”/“X”键。。。没错这是osu!(当然不交替也可以~)</li>
<li>半分钟左右已经足够啦~普通地戳下 Enter</li>
<li>分析结果将显示在框中,拖动选中其中一段折线可以单独查看对应段的速度(以及coder对这个结果的自信程度!)</li>
</ol>
<ul>
<!--
<li>多按了不要方啦~按 Backspace 撤销上次的记录。不过时间间隔并不会重设。</li>
<li>Space 键重设时间间隔——下次记录的时间间隔将以这次 Space 为准</li>
-->
<li>节奏乱了?淡定。。淡定。。Backspace 去掉乱的记录,然后继续。第一拍按 Space 而不是“Z”/“X”。</li>
<small>… <kbd>Z</kbd> <kbd>X</kbd> <kbd>Z</kbd> <kbd>X</kbd>(乱)<kbd>←</kbd> <kbd>←</kbd> <kbd>←</kbd>(休整)<kbd>Space</kbd> <kbd>Z</kbd> <kbd>X</kbd> <kbd>Z</kbd> …</small>
<li>计划加入爪机支持。。。不知道什么时候有空呢</li>
<li>抓住野生的 bug 到群里吼一声就可以啦 求不调戏coder (つД`)ノ 算法实现细节戳 → <a href='https://github.com/VMGroup/BPM'>这里</a></li>
</ul>
</div>
</div>
<canvas id='bpm-canvas'></canvas>
<br><br><br> <!-- 啊既然是随便玩的窝们就别管代码了(/w\) -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
!window.jQuery && document.write('<script src="js/jquery-2.0.3.min.js"><\/script>');
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src='js/bpm.min.js'></script>
<script>
document.getElementById('btn-close-instructions').addEventListener('click', function () {
document.getElementById('panel-instructions').classList.add('all-hidden');
document.getElementById('more-heading').classList.add('all-hidden');
});
var meter = bpm('bpm-canvas');
window.addEventListener('keydown', function (e) {
if (e.keyCode === 90 || e.keyCode === 88) meter.pat();
else if (e.keyCode === 8) meter.undo();
else if (e.keyCode === 32) meter.break();
else if (e.keyCode === 13) meter.finish();
});
</script>
</body>
</html>