Homework: Hello CCRMA!

  • Out: Sep 21, 2021 Tuesday
  • Due: Sep 30, 2021 Thursday

Objectives

  • Familiarize yourself with CCRMA's computing environment.
  • Equip your computer with tools necessary for the future homework.
  • Make a simple beep with Web Audio API.

Key Results

  1. Create your CCRMA account.
  2. Connect to the CCRMA server via terminal.
  3. Set up your personal web storage on CCRMA's web server for the first homework.
  4. Upload the first homework to the server.

Creating your CCRMA account

To create a CCRMA account, fill out the account registration form.

Creating a CCRMA account is a prerequisite of Music 220A coursework. If you are not able to create one for some reasons, make sure to consult the teaching team before the second week of the class.

Setting up your machine

In order to follow this homework instruction, make sure to have a terminal working on your machine. If you are not familiar with the terminal at all, we recommend you to read and watch a few tutorials on the internet.

MacOS and Linux has a built-in terminal, but you might have to install additional software to use a terminal on Windows. We recommend this guide for Windows users.

There are several other ways to submit homework that do not involve the terminal, but please note that the teaching team will not be able to provide help for such case.

Open up your terminal and type these commands:

(the '$' shown below is a prompt typed by the terminal at the beginning of each command line, don't type it yourself -- just type the command that follows. Different systems have different terminal prompts, so yours may not be a '$'.)

$ ssh -V
OpenSSH_7.9p1, OpenSSL 1.0.2s 28 May 2019

$ rsync --version
rsync version 2.6.9 protocol version 29.
...(omitted)...

If you see something similar shown above without errors, you are ready to proceed to the remaining steps.

Connecting to CCRMA server

To connect to the CCRMA server, use ssh command. Note that you need to replace hongchan@ with your CCRMA username.

$ ssh hongchan@ccrma-gate.stanford.edu
Welcome to CCRMA, Stanford University
[This system is for authorized use only]
...(redacted)...
hongchan@ccrma-gate.stanford.edu's password:

You will be greeted by the CCRMA server and asked to type in your CCRMA credential. (not your Stanford credential)

Last login: ...(redacted)...
[ccrma-gate hongchan] ~>

When you see this prompt in the terminal, it means that you have made a secure connection with the CCRMA server successfully. Hooray!

To log out of the connection, simply type logout.

[ccrma-gate hongchan] ~> logout
Connection to ccrma-gate.stanford.edu closed.
$

Pay attention to the terminal prompt because it indicates where you are. In this instruction, [ccrma-gate ...] shows you are working on the CCRMA server and $ means it is the local terminal.

Get organized with your CCRMA web storage

Let's log into the CCRMA server again, and run the following commands:

[ccrma-gate hongchan] ~> cd ~/Library/Web
[ccrma-gate hongchan] ~/Library/Web> mkdir 220a 220a/hw0

Type in the following commands to check if the directory for the first homework is properly created:

[ccrma-gate hongchan] ~/Library/Web> ls -la 220a/hw0
total 1
drwxr-xr-x. 2 hongchan users 2 Jun 14 16:47 ./
drwxr-xr-x. 3 hongchan users 3 Jun 14 16:47 ../

Congrats! You just completed the first half of homework 0.

Creating the first web page

  1. First, open up your preferred text editor.

The teaching team recommends VSCode but it is only for the ease of technical support. The Music 220A coursework does not rely on specific functionalities provided by such code editor, so you can use any editor you like.

  1. Then create a directory for your first homework.
  2. Then create the first file index.html in that directory.
  3. Open index.html file and copy/paste the following code:
<html>
<head>
<title>
Homework 0: YOUR_TITLE_HERE
</title>
</head>
<body>
<button id="start">Start</button>
<script>
const start = () => {
// YOUR_CODE_HERE: Play your first beep for more than 3 seconds.
};

// This code handles the button logic.
window.addEventListener('load', () => {
document.getElementById('start')
.addEventListener('click', start, {once: true});
}, {once: true});
</script>
</body>
</html>

As you can guess, the action item here is to fill both YOUR_TITLE_HERE and YOUR_CODE_HERE.

For the first homework, you can easily test your work by drag-and-dropping index.html file to the browser. Click anywhere in the page to start the audio. Iterate on the code until you are satisfied with your first beep. These references might help you with your first exploration:

Uploading your work to CCRMA server

  1. Open up a terminal window and log into the CCRMA server.
  2. Check if the directory is still there with the following command remotely:
[ccrma-gate hongchan] ~> cd ~/Library/Web/220a/hw0
  1. Open another terminal window and run the followings locally, but with your CCRMA credential. (Make sure to replace hongchan with your account name.)
$ cd YOUR_HW0_DIRECTORY
$ rsync -avz ./ hongchan@ccrma-gate.stanford.edu:~/Library/Web/220a/hw0
Welcome to CCRMA, Stanford University
[This system is for authorized use only]
...(redacted)...
hongchan@ccrma-gate.stanford.edu's password:
building file list ... done
./
index.html

sent 403 bytes received 48 bytes 63.73 bytes/sec
total size is 503 speedup is 1.05
  1. Go back to the other terminal window and check if the file is uploaded correctly:
[ccrma-gate hongchan] ~/Library/Web/220a/hw0> ls
index.html

You should see index.html on the other side. Otherwise, go back and double check all the steps so far.

Finally, check the homework page with the browser. Go to the URL below, but be sure to replace YOUR_CCRMA_USERNAME with your actual CCRMA account name.

https://ccrma.stanford.edu/~YOUR_CCRMA_USERNAME/220a/hw0

Then click anywhere on the page to start the sound. If you can hear the sound, that concludes the homework 0 of Music 220a.

What's next?

Our friendly crawler script will pick up your homework when you access the homework factory page. If you don't see your homework in the factory, keep calm and contact the teaching staff.