Kyle Laviana's Music 220C Blog, Spring 2018


Week 1 -- 4/3 & 4/5: I spent a lot of time brainstorming potential final project ideas. I touched upon included expanding upon the interactive vocoder I built for Music 250A last quarter, creating an audio-visual performance piece, or creating some project in the realm of music education. I decided that I might want to look into building an interactive audio-visual software program, as that is something I have always wanted to do but never actually gotten around to. Moreover, I wanted to make this program specifically tailored to music education for kids.

Week 2 -- 4/10 & 4/12: After continuing to brainstorm more specific project ideas, I came across the Chrome Music Lab. The Chrome Music Lab is a Google website intended to make learning music more accessible through fun, hands-on experiments. Currently there are 13 small-scope programs on there, from little rhythm exercises to a program that shows the spectrograms of various instruments and natural sounds. This week, I decided that I want to try and make an additional Chrome Music Lab program because they are fun, interactive, and small-scope. For my project, I am hoping to create a program that interacts with the "chord wheel," as shown in the picture below. The user will have an option to select the the key of a progression and the number of chords in that progression. When a key is selected, the corresponding chords on the chord wheel are highlighted. When a number of chords are selected, that same number of chords appear as numbered tokens on the screen. You can drag and drop the tokens onto chords to hear what different chord progressions sound like.

Week 3 -- 4/17 & 4/19: This week I created a drag and drop interface that will serve as the basic building block of my program. The squares will eventually take the form of a wheel, but for now the squares provide a simple representation of functionality. The user can select a key, which highlights the chords that are in that key, and the user can also select a number of chords, creates that same number of tokens on the page. The tokens can be dragged onto any of the chords, at which point they are highlighted.

Week 4 -- 4/24 & 4/26: Per suggestion from other members in the class, this week I added two additional boxes: a "current chords" box and a "common chord progressions" box. These menus are pretty self-explanatory, but the "current chords" box tracks where the tokens are while the "common chord progressions" box displays common chord progressions for the given key that was chosen by the user.

Week 5 -- 5/1 & 5/3: This week I created a circular navigation in HTML. I skewed and rotated divs to create a circle, but this turned out to be clunky and buggy. Per suggestion of a class member, next week I will look into circle-friendly SVG as an alternative to HTML objects.

Week 6 -- 5/8 & 5/10: This week I created a circular navigation using SVG, and it worked a lot better than the HTML alternative.

Week 7 -- 5/15 & 5/17: This week I began integrating the circular SVG menu with the drag and drop interface that I made in the earlier weeks, however I have run into issues doing so. Primarily, the html drag and drop elements think that SVG objects have size 0 so it is impossible to place draggables into them. I have been exploring ways to work around this problem, such as mouseover events or other draggable interfaces.

Week 8 -- 5/22 & 5/24: This week I finally got the interface fully functional. Primarily, this involved a complex drag and drop algorithm that allowed me to drop tokens on the SVG slices, reduce their opacity, and eventually send their text to the music algorithm. The screenshot shows a token dropped on an Em chord.

Week 9 -- 5/29 & 5/31: This week I was able to integrate the music into the application by way of the Web Audio API. The Web Audio API has been pleasantly similar to ChucK, with which I am quite familiar, so picking it up wasn't too hard. My biggest problem was creating a bug-free playback system, as I had trouble getting old "shreds" to turn off, and for new ones to start as the tokens are moved. For now, the audio only uses sine waves, as my only other options were to insert individual samples or insert my own waveform algorithm, neither of which were feasible considering the time frame. I will consider each of these options in the future, however. Additionally a future Web-Audio related progress would be to have the chords follow some sort of artifically intelligent voice leading sequence, as opposed to just playing all chords in root position.

Week 10 -- 6/5 & 6/7: Now that my app was functional, this week I was able to focus on CSS and design. The app is intended to be simple, sleek, and for kids, so I opted for a colorful and minimalist design.

Final Product: Here is a screenshot, and here is a link: Chord Wheel

Again, this is a work in progress, so look forward to future iterations over the summer and next year!

--Kyle Laviana, Spring 2018