/
chords.html
102 lines (89 loc) · 6.06 KB
/
chords.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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<title>Chords</title>
</head>
<body>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> -->
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script> -->
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<a href="index.html"><h3>CUTHBERT</h3></a>
</div>
<ul class="list-unstyled components">
<p>Menu</p>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="beats.html">Beats</a>
</li>
<li>
<a href="chords.html">Chords</a>
</li>
<li>
<a href="melody.html">Melody</a>
</li>
<li>
<a href="challenges.html">Challenges</a>
</li>
<li>
<a href="next_steps.html">Next Steps</a>
</li>
<li>
<a href="putting_it_all_together.html">Putting It All Together</a>
</li>
<li>
<a href="acknowledgements.html">Acknowledgements</a>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<h1>Chords</h1>
<p>
We used a datasets of chord progressions in various styles such as house, hip-hop, pop, lo-fi, etc., as a foundation for our composition. Our approach was to transpose all chord progressions to one key, and then randomly sample a chord progression every 4 bars. In particular, we used the Splice Chord Progression MIDI Dataset and the BasicWavez 50 Famous EDM Chord Progression MIDI Dataset. Combined, this gives us 100 chord progressions for use.
</p>
<p>
After importing the datasets, we transposed everything to C major / A minor. This allowed us to make sure our composition stayed in the same key when combining chord progressions, allowing it to sound like one song. After this step, we noted that while most chords were in the key of C, there were some strange chords remaining in the jazz chord progressions. They sounded cool though, so we kept them.
</p>
<p>
We next cleaned the chords to be in 4/4 time and extracted only the first four measures of each progression. The rationale here was that chord progressions in popular music repeat in periods of four, so this is sufficient to capture the entire progression. Forcing all chord progressions to only span 4 measures allowed us to build a composition in which we could change the chords every 4 measures.
</p>
<p>
Finally, we randomly sampled a chord progression from our datasets every 4 measures and added that to our composition. Surprisingly, this sounded fairly fluid, presumably because all progressions were transposed to C to begin with. Along with the drums, the system sounded pretty decent already.
</p>
<h2>Chord Similarity</h2>
<p>
For the loop selection, explained in further detail in the next section, we had a data structure that mapped chords to loops. However, each chord didn't always have a perfect match, so we determined a chord similarity algorithm to find the next closest match. We decided on pitch similarity, where we took the set of all the notes in each chord, and determined the proportion of matching notes to non-matching notes. We then took the chord with the highest proportion.
</p>
<p>
Below is a demo of our chord generator. The demo generates a 4-measure chord progression, and you can vary the random seed to see different progressions.
</p>
<iframe width="1000" height="500" src="https://zhang-lucy.github.io/cuthbert-site/widgets/chord_demo.html"></iframe>
</div>
</div>
</body>
</html>