About

With much of our listening mediated by streaming platforms, social networks, and virtual environments, it is exciting to imagine the new alternatives that these tools pose for composing and distributing music online. But how can these web technologies be used to shape a modern sound practice? In this 10-week class, participants will explore this question by building musical experiences that draw on live web APIs, networking, and generative algorithms in the web browser.

Sessions will combine discussion, sharing, technical exercises, and hands-on lab time. Approximately half of the courses will focus on tech agnostic composition and sound design exercises. These lessons will include sampling and digital synthesis techniques, as well as tactics in improvisational performance. Participants will work each week to build their own web-based sound pieces while collectively imagining what new forms music may take on the world wide web.

The course will primarily use the Web Audio API and the Max/RNBO and p5.js sound libraries though other tools will also be explored.

This website serves as an archive for the 3 hour workshop offered to the Sonic Art Arts program at Brooklyn College on March 23rd. Text description is taken from The Musical Web class summer 2024 session which can be found here.

Video Recording

Resources

Lessons

the audio tag

We're going to use a the html audio tag (the simplest way to embed sound into a page) to compose a piece.

Get familiar with our programming environment (Glitch.com)
Create a basic webpage with a sound file embeded
Use JavaScript to programmatically adjust playback of the audio file

Ok, let's set up our development environment.

set up a glitch.com account. Glitch is a web based platform that makes building websites fast. It's fun! It also handles all of the hosting for you so that we won't have to go through the process of buying domain names and setting up our own hosting through FTP (we can talk about all of this stuff later, but customizing our domain name can be a fun part of the process).
Start with a "New Project" (Glitch Hello Website)

Adjust Settings - Dark Theme, Text Wrap
Change URL of project - Settings - Edit Project Settings
Let's navigate to the HTML section of the webpage. Click on index.html in the left hand pane of Glitch.com.
Let's look at some of this code together.
but we should write this from scratch so we know how it works.

                
        <!DOCTYPE html>
        <html>
            <head>
                <title>My Page</title>
            </head>
            <body>
                <p>Hello, world!</p>
            </body>
        </html>

Now let's add a few lines of code so that we can get a sound file and image onto our page. Everything that we want to render on our page has to in the body tag. We'll also need to add a sound to our assets folder and grab the link Glitch generates for us.

                
        <!DOCTYPE html>
        <html>
            <head>
                <title>My Page</title>
            </head>
            <body>
                <p>Hello, world!</p>
                <audio controls src="path/to/your/file"></audio>
                <image src="path/to/your/file"></image>
            </body>
        </html>

Feel free to order these however you would like! And now that we're styling, let's add a link to our CSS or "cascading style sheet." Cascading refers to how the css rules are applied from top to bottom (rules at the bottom will overwrite the ones at the top)

            
        <!DOCTYPE html>
        <html>
            <head>
                <title>My Page</title>
                <link rel="stylesheet" href="/style.css"/>
            </head>
            <body>
                <p>Hello, world!</p>
                <audio controls src="path/to/your/file"></audio>
                <image src="path/to/your/file"></image>
            </body>
        </html>

Now let's edit the style sheet by looking at the style.css file in the left hand pane.

Stylesheets uses a different kind of syntax, but one that references the tags in our html page.

You can use style sheets to change things like color, font size, image corner-roundedness, and even animations!

A very seasonal CSS Still Life coding exercise ~ pic.twitter.com/cASQjdg3ga
— Mindy Seu (@mindyseu) February 14, 2017

This is great! There's just not much more we can do with audio using this approach. We'll need to use the Web-Audio API and JavaScript if we want to add effects or build anything dynamic like animations into our application. We'll look at p5.js because it is made with creative coding in mind, but I've included links to a few other libraries for sound in the resources section. For now, let's just look at some vanilla (yum) JavaScript, and add some more flavors later.

Here's a piece I made called 'HTML Speed Study.' It demonstrates integrating javascript with the <audio> tag. Let's listen and look at the code together.

What else can we experiment with using the <audio> tag?
<audio> tag documentation

Assignment

Create a website using the <audio> tag. Make a 'release' complete with images and CSS and share your URL to the Sonic Arts Discord. Use the Laurel Schwulst and Ellie Hunter's Windchime (link) as inspiration. Maybe the site is an archive of material you are interested in and have been collecting? Maybe you want to record sound and video from every bus stop in your neighborhood (idk)?

p5 sound

creating a sequencer with oscillators

The Musical Web * Sonic Arts * March 2024