Skip to content
Julia's DevLog

DevLog 5-3

DevLog 5-3

Section titled “DevLog 5-3”

Create an interactive sound experience

Section titled “Create an interactive sound experience”

  1. Review the Sound & Music page to learn Tone.js and Strudel.

  2. Complete the Strudel First Sounds tutorial. Post a link to your finished REPL ✏️

  3. Complete the Strudel First Notes tutorial. Post a link to your finished REPL ✏️ here.

  4. Complete the Strudel First Effects tutorial. Post a link to your finished REPL ✏️ here.

    Combined all three tutorials into one REPL: https://strudel.cc/#Ly8gZnVua3kgc3BhY2UgYmVhdCBmcm9tIEZpcnN0IFNvdW5kcyBUdXRvcmlhbApfJDogc2V0Y3BtKDEwMC80KSAKc291bmQoIjxiZCoxMCBiZCAtIFtoaCBbYmQgcmltXSozIHJpbV0qMiAtIHJpbSBiZCBoaCBiZD4qMTEgIikuYmFuaygiVmlzY29TcGFjZURydW0iKQoKLy8gRmlyc3QgTm90ZXMgVHV0b3JpYWwgKyBFZmZlY3RzIAovLyBWaWRlbyBnYW1lIHNwZWVkIHVwIHNvdW5kIApub3RlKCJbYyMzIGU1XSo0IFtnMiBiYiBjI10qNSIpCiAgLnNjYWxlKCJGOm1ham9yOnBlbnRhdG9uaWMiKQogIC5zb3VuZCgic2F3dG9vdGgiKQogIC5nYWluKCJbNF0qNCIp

  5. Music Mouse Explained | Laurie Spiegel on Algorithmic Composition (1987 Archive) (27:38). Post a reading response in your DevLog per information in the [Assignments]

    1. This video is an interview with Laurie Spiegel about her creation called Music Mouse. The Music Mouse is the earliest instance of a computer program where a user can use the elements of the computer (mouse ball and keyboard) to make music by moving around on a grid of harmonies.

    2. “We live in a sort of an elitist musical world in a way, people who don’t have the physical technique, who don’t have the theoretical background, but who have the sensitivity and imagination generally haven’t had a way of making music.” (7:19)

    3. What I really enjoy about this video is that everyone is so amazed that this can be done on the Macintosh. They are amazed because, as she says, computers used to be room sized.

    4. I’m wondering if Laurie Spiegel was well-known to average people at the time of this interview. Also, did lots of people know about Music Mouse at the time?

    5. I think that Strudel is a prime example of this type of music software that allows more people to participate in making music. Even someone who is a music pro can probably find something new to do with strudel. It makes music theory more accessible because you don’t have to understand it, and it also makes many instruments accessible, eliminating that cost barrier.

  6. Complete all five parts of the Getting Started with Tone.js | Web Audio Tutorial - Pts 1-5 (3:31, 6:37, 10:20, 5:59, 9:28). Post a link to your finished project online ✏️

    My tutorial for Tone.js is the same link as my project. You will see that I commented out the code from the earlier parts of the tutorial so that you can still evaluate and grade them: https://tonejs-tutorial-final.vercel.app/.

  7. Explore the inspiring examples below.

  8. Design and code an “interactive audio experience” that makes use of Tone.js. Consider using shapes, color, and other visuals in addition to sounds. This need not be fancy or polished, since you have less than a week to complete it. Try to have fun creating.

  9. Post designs mockups (pencil/paper, Figma, etc.) here. ✏️

    I didn’t do a mockup for this project, but I did write pseudocode:

    1. Need to find out what midi note each key indexes.
    2. console.log(key) after pressing key
    3. Match each midi note to a color by creating an array of colors
    4. Using the documentation of key.note feature, use random. Property to assign one of the colors to each midi note
    5. Also ensure browser is “awoken” to sound by including eventlistener for mouse movement

  10. Post links to your project, a video, and a 100-150 word statement about the concept and technology of your interactive audio experience ✏️ Link here: https://tonejs-tutorial-final.vercel.app/.

    Note that I published with Vercel instead of github pages because no matter what I tried, I could not get Github pages to allow me to get the sound playing after the eventlistener, and also it would not allow the tone.js file because it started with http instead of https.

    Statement: My project allows the user to play notes with the keyboard, and each note has a unique color assigned to it. Hopefully, the user will start to associate the sound of the notes with colors. It is a simple project, but I was inspired by how Strudel lets you play music easily by turning the notes into numbers. So I wondered what would happen if those numbers also corresponded to colors, because I am a visual person. In a future interation, I could make a piano interface where the note lights up that color to help users memorize the piano. But, since I only had a week and no knowledge of pianos, I did not accomplish that.

Optional Challenge: Use the Strudel device motion and input devices to create your audio experience.