DevLog 5-3

Pacis Nkubito: DEVLOG 5-3

Interactive Sound Experience with Strudel and Tone.js

This week I learned how to add sound to my project using Tone.js. I learned how to manipulate web audio API using Strudel and Tone.js. I also completed the Strudel tutorials and built a Guitar using Tone.js.

Building an Interactive Audio Experience

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

   First Sounds

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

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

4. 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 ✏️ here.

   Tone.js Tutorial Project

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.

• Post design mockups (pencil/paper, Figma, etc.) here. ✏️
• Post links to your project, a video, and a 100-150 word statement about the concept and technology of your interactive audio experience ✏️ here.

Mockup

Summary

To Learn more about sound in javascript, I created a simple 6 strings guitar using Tone.js, HTML, and CSS. First, I used my IPad to sketch out the visual elements of my digital guitar. I explored layouts, design, and color schemes and finalized a rough sketch of what I think could best represent my application.

Then, I used HTML and CSS to create the body and strings of the guitar. I mostly used div tags and styled them to look like guitar strings. I labeled each guitar string and gave it a data-key in a set of Q-W-E-R-T-Y and then created a style for a class called active that would be dynamically added and removed from the guitar strings and when added It would highlight the plucked string.

Finally, I used Tone.js to add sound to my guitar. I mapped each guitar string to a specific note as follows: Q = E2, W = A2, E = D3, R = G3, T = B3, Y = E4. Then I added an event listener that listens for keydown events and then checks if the pressed key is one of the guitar strings and if it is, it plays the corresponding note and highlights the string as follows:

    function playGuitarNote(note, key) {
        if (Tone.context.state !== 'running') {
            Tone.context.resume();
        }

        const stringElement = document.querySelector(`.string[data-key="${key}"]`);

        if (stringElement) {
            stringElement.classList.add('active');
        }

        pluckSynth.triggerAttackRelease(note, "4n");

        setTimeout(() => {
            if (stringElement) {
                stringElement.classList.remove('active');
            }
        }, 400);
    }

    document.addEventListener('keydown', (event) => {
        const key = event.key.toLowerCase();
        if (noteMap[key]) {
            playGuitarNote(noteMap[key], key);
        }
    });

Project Link and Video

I then hosted my project on Github Pages and it can be previewed here

Below is a video demonstration of the above project as well:

Reading Response

Music Mouse Explained | Laurie Spiegel on Algorithmic Composition | 1987 Archive | 27:38

In this video, right of the bat, I was impressed by how Laurie Spiegel designed a macintosh program in 1987 using C programming. She explains how she used a macintosh and it’s accessories like a music mouse and a keyboard to help people create music easily and faster by automatic pitch selection and hence support people’s musicality without limiting it. It is a pretty impressive program that runs efficiently and produces good sound.

The most memorable parts of the video for me where “Any instrument has aesthetic biases, all insturments do, all languages do, and this happens to fit some of my own personal definition of musicality.” and “we live in a sort of elitist musical word in a way, people who don’t have the theoretical background but who have the sensitivity and imagination generally haven’t had a way of making music.”

One question I have is, Is the same technology that Laurie Spiegel used still being used in modern music software today?

Finally, I couldn’t find many memes about music softwares but I found this image that summarizes the software of Laurie Spiegel pretty well: