dmx/index.html at master · roller8/dmx · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <title>DMX</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/index.js"></script>
    <link rel='stylesheet' href='assets/css/styles.css' type='text/css'/>
</head>
<body>
    <section>
        <article class="tempo">
            <input value='120'>
            <label>TEMPO</label>
        </article>
        <article class="toggle-pattern top-btn">
            <button class="active">PATTERN</button>
            <span>PATTERN</span>
        </article>
        <article class="swing top-btn">
            <button>SWING</button>
            <span>SWING</span>
        </article>
        <article class="start-stop top-btn">
            <button>START/STOP</button>
            <span>START/STOP</span>
        </article>
        <article class='row one'>
            <span>BASS</span>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
            <button class="kick simple-button">Kick</button>
        </article>
        <article class='row two'>
            <span>SNARE</span>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
            <button class="snare simple-button">Snare</button>
        </article>
        <article class='row three'>
            <span>CLAP</span>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
            <button class="clap simple-button">Clap</button>
        </article>
        <article class='row four'>
            <span>HI-HAT A</span>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
            <button class="clhat  simple-button">Closed Hat</button>
        </article>
        <article class='row five'>
            <span>HI-HAT B</span>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
            <button class="ophat simple-button">Opened Hat</button>
        </article>
        <div class="glow hide"></div>
    </section>
    <div id="instructions">
        <!-- <h2>Controls</h2> -->
        <p id="preface"><em>Welcome to our homage to the legendary Oberheim DMX drum machine. While this isn't an exact replica of the original, it is heavily inspired by the original in its look and feel, and it uses the same sounds as the original.</em></p>
        <h2>Programming a Beat</h2>
        <p>Each sound listed on the left is followed by a row of 16 buttons, dividing a "bar" of musical time into 16 "beats". Activating a button will make the sound trigger at that point in time during playback. On playback, a bar plays to the end then loops back to the beginning. The TEMPO value determines how many times the bar will loop in 1 minute.</p>
        <p>For added fun tap the 0 through 9 keys a few times and enjoy making music!</p>
        <ul>
            <li>PATTERN: clears or restores the default pattern</li>
            <li>SWING: Introduces timing anomalies during playback to give a more human feel.</li>
            <li>START/STOP: plays or stops the current pattern</li>
            <li>TEMPO (arrow up/down): makes the drum pattern play faster or slower</li>
            <li>NUM KEYS 0-9: Trigger individual drum "hits" for realtime playback fun! Jam along with the running pattern!</li>
        </ul>
    </div>
</body>
</html>