Sound, Music and Speech Programming with JavaScript
Student Qualifications
- Grades 6–12 (Accelerated learners in earlier grades are welcome with instructor approval)
- Logical thinking and math skills
- Facility with computers
Open This Document
Link to this page: bit.ly/db-jssnd
Resources
- Your project submissions page
- JavaScript Guide
- p5.js Online Editor
- p5.js Reference
- p5 Sound reference
- Oscillator reference
- My YouTube Channel with Programming Lessons
Welcome and Introduction
Your Teacher
I am Dave Briccetti (bri-’cheddy). I am a professional computer programmer who enjoys teaching programming to kids. I teach at three private schools, at the Lafayette Library occasionally, and I have individuals and small groups come to my house in Lafayette for lessons. (More)
Following Links
When you follow links from this document, holding Shift and Cmd while you click will open the page in a new tab and switch to that tab.
About This Course
JavaScript is a popular programming language, especially for programs that run in a web browser. JavaScript supports making sounds and music, and synthesizing and recognizing speech. This class teaches the following:
- what sound is and how we hear
- playing sounds of any pitch using an oscillator
- making very simple music
- synthesizing speech (getting the computer to talk and say whatever you like)
- recognizing speech (having the computer understand what you say)
Class Format
Our classes consist of:
- Instruction (Lectures)
- Exercises, where you practice what you’ve just learned, with specific goals
- Creative project work, where you apply what you’ve learned in your own way
- Show and tell, where we share our interesting creations
I usually keep lectures to just a few minutes. During this time I need your focus and full attention. During exercises and creative work, I encourage you to interact with your classmates. Get up, walk around and see what others are doing.
Parents
Many of your parents are likely excited about you learning programming. They will be curious about what we are doing. Please point them to this page, so they can follow along with us. Show them at home what you are learning in class. Explaining your programs to others can increase your understanding.
When You Finish
When you complete assigned work, there’s always more to do. You can
- Help others
- Experiment, and make your own original creations
RoomHelper 3000
I created this webapp to help with my classes. It will help me get to know your names and faces, and to call on you fairly.
The link to RoomHelper 3000 is in the Resources section, above.
Select your name, and the row and column of your computer, and
push the Set
button.
Multiple Browser Windows
I recommend you put RH3K (RoomHelper 3000) in a small browser window off to one side, and do your work in a larger window.
Computer Programming
Computer programs are instructions for getting a computer to perform a task, such as these:
- Send a text message
- Play a game
- Manage a calendar
- Drive a car
- Fly a spacecraft
Types of Computers
Programs run on computers of different sizes and types:
- mainframes
- desktops
- laptops
- tablets
- smartphones
- Arduino and Raspberry Pi
Languages
Programs are written using programming languages. Some popular ones are:
- Java
- JavaScript
- C++
- Python
- Scala
Building on the Work of Others
Programmers build on the work of other programmers. If we all had to figure out how to make 3D graphics or simulate physical processes (bouncing objects, collisions, gravity, etc.), it would take much longer to create our applications. People who are good at specific areas of programming (graphics, physics, music, etc.) publish their programs for use by others, as packages, libraries, or frameworks.
Let’s Get Coding
Sound
p5.js has a feature that lets us make sounds.
Oscillator
An oscillator creates a tone at a specific frequency. This code makes a tone at the frequency 440 hz.
Run this “440 Oscillator” program
You can change the 440 to different numbers to hear different frequencies.
Controlling Frequency with mouseX
You can change the frequency when the mouse moves.
Mouse frequency example program
Pitch Matching Game
Here is a very cool pitch matching game, using two oscillators.
Tuning and “Beats”
Do Something Creative with Sound
Use what you’ve learned about p5.Oscillator to make something creative and interesting. Here is an example.
Playing Notes Using MIDI Note Numbers
Let’s study this Multi-Octave Spooky Music program and make your own sequence of pitches. If you like, use this MIDI note table to find note numbers.
Sliding Chords Program
Try making music with the Sliding Chords program. Modify it.
Speech Synthesis
Run and modify I am a Talking Computer
Speech Recognition
Stupid Nonsense Spoken Sentences
Speak the Background Color is a starting point for your project where you will make interesting sounds and graphs happen on p5.js using your voice.