pianometer/index.html
2023-04-01 01:35:21 +08:00

65 lines
No EOL
2.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html>
<head>
<meta charset="UTF-8">
<title>好和弦的鋼琴鍵盤顯示器</title>
<link rel="stylesheet" href="style.css">
<script src="p5.min.js"></script>
<script src="tonal.min.js"></script>
<script src="webmidi.js"></script>
<script src="globals.js"></script>
<script src="piano-visualizer.js"></script>
</head>
<body>
<div id="main">
<div id="controls" class="center">
<div>
<h3>鋼琴鍵盤顯示器 by NiceChord</h3>
<div style="display: flex; justify-content: space-around;">
<div>
<h5>選擇 MIDI 裝置</h5>
<input id="slider" type="range" min="0" max="0" value="0">
<div id="device">Select Input: </div>
</div>
<div style="display: flex; flex-direction: column; justify-content: center; align-items: start;">
<div>
<label for="colorpicker">選擇顏色</label>
<input type="color" id="colorpicker" value="#ff0090" oninput="changeColor()">
</div>
<div style="display: flex; align-items: center;">
<span style="margin-right: 5px;">彩虹模式</span>
<input type="checkbox" id="rainbow-mode-checkbox" onclick="toggleRainbowMode(this)">
<label for="rainbow-mode-checkbox">
<span class="switch-txt" turnOn="On" turnOff="Off"></span>
</label>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
<div class="center">
<div id="piano-visualizer">
<!-- Our sketch will go here! -->
</div>
<span style="font-size: 11px;">
TIME使用時間 | NOTE COUNT總彈奏音符數 | NPS最近一秒鐘彈奏音符數括號為歷史最大值 | LEGATO圓滑指數最近一秒鐘平均來說有幾個鍵被同時按住 <br />
CALORIES消耗熱量估計值好玩就好| PEDALS左右踏板深度顯示 <br />
(密技:點鍵盤最左上角的角落,可以儲存截圖) <br /><br />
</span>
覺得好用嗎?到 <a href="https://nicechord.com">NiceChord.com</a> 逛逛支持我!原始碼在 <a href="https://github.com/wiwikuan/pianometer">GitHub</a>
</div>
</div>
</body>
</html>