-
Notifications
You must be signed in to change notification settings - Fork 1
/
sequencer.html
103 lines (82 loc) · 3.86 KB
/
sequencer.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="javascript/web-audio-scheduler.js"></script>
<script src="javascript/SoundManager.js"></script>
<script src="javascript/QueryProcessor.js"></script>
<script src="javascript/instruments.js?v=210410b"></script>
<script src="javascript/Track.js"></script>
<script src="javascript/Song.js"></script>
<script src="javascript/Sequencer.js"></script>
<script src="javascript/ui.js"></script>
<script src="javascript/Controls.js?v=210410b"></script>
<script src="javascript/SongLoader.js"></script>
<script src="javascript/SequencerInit.js"></script>
<title>PianoRoll.js</title>
<link type="text/css" rel="stylesheet" href="style/main.css">
</head>
<body>
<div id="menu">
<div id="options">
<div id="note-lengths">
<div id="whole"><img src="images/whole-note.jpg" alt="whole note" height="30" width="25"/></div>
<div id="half"><img src="images/half-note.jpg" alt="half note" height="30" width="25"/></div>
<div id="quarter"><img src="images/quarter-note.jpg" alt="quarter note" height="30" width="25"/></div>
<div id="eight"><img src="images/eigth-note.jpg" alt="eighth note" height="30" width="25"/></div>
<div id="sixteenth"><img src="images/sixteenth-note.jpg" alt="sixteenth note" height="30" width="25"/></div>
</div>
付点:<input type="checkbox" id="note-point-checkbox">
<div id="song-controls">
<span>Tempo: </span><input id = "tempo" type="number" min="30" max="400" step="1" value="100">
<button id="play-button"><img src="images/play.png" alt="play" height="32" width="32"/></button>
</div>
<div id="tracks-container">
トラック:
<select name="tracks" id="tracks">
</select>
トラックの音量:<input type="range" id="track-volume-slider" min="0" max="127">
楽器:
<select name="instruments" id="instruments">
</select>
<button id="clear">Clear Track</button>
</div>
<div>
</div>
<div id="song-info-controls">
曲名: <input type="text" id="song-name-textbox">
<button id="save-button">保存</button>
<button id="release-button">公開</button>
<button id="create-new-song-button">新しい曲の作成</button>
<span id="status-text"></span>
</div>
<a href="index.html">トップへ</a>
</div>
</div>
<div id="blank">
<!-- masure counterを右に動かすための要素 -->
</div>
<div id="measure-counter-container">
<div id="measure-counter">
<canvas id="measure-counter-canvas" width="3200" height="15"></canvas>
</div>
</div>
<div id="main">
<div id="piano-container">
<div id="piano">
<canvas id="white-keys" width="50"></canvas>
<canvas id="black-keys" width="50"></canvas>
</div>
</div>
<div id="grid-container">
<div id="grid">
<canvas id="canvas-notes" width="3200"></canvas>
<canvas id="canvas-grid" width="3200"></canvas>
</div>
</div>
</div>
</body>
</html>