Autoplay
Autocomplete
HTML5
Flash
Player
Speed
Previous Lecture
Complete and continue
Generative Music Box Project
A Generative Music Box Project
Guide to the Project (1:38)
Getting Started
Introduction to Module 1 (1:42)
Prerequisites and tools
Exercise: Think about the app (1:38)
The game plan (2:34)
Audience question
Code the markup with HTML
Code the style with CSS
The Canvas
Introduction to Module 2 (1:59)
Code design
Get set up
Working with the canvas (5:22)
Create the View (2:56)
Crash test the canvas
How to draw a circle on the canvas (5:02)
Add a circle to the canvas
Crash test getting a circle on the canvas
Handling Clicks
Introduction to Module 3 (1:37)
Handle clicks on the canvas (3:48)
Add a click handler to the canvas
Crash test the click handler (0:54)
Overheard on the forum
Uh oh, a bug! (2:07)
Fix the bug (1:50)
The View
Introduction to Module 4 (1:32)
A little design (1:38)
Draw the circles on the canvas (4:15)
Crash test the circles (1:15)
Audience question
Take a break
How to animate the circles (5:04)
Code to animate the circles
Crash test the animation (0:59)
Repeat the animation (2:50)
Crash test the repeating circles (1:02)
Audience question
The Audio
Introduction to Module 5 (2:10)
Game plan for audio
Get a web server running
Prebaked goodness: audio.js
Prebaked goodness: bufferloader.js
Prebaked goodness: musicbox.js
Play audio with each circle (3:18)
The final test (2:05)
Extras
Bonuses (1:37)
Going further
BONUS: Update your Music Box app with the latest ES6 JavaScript features. (13:44)
Get set up
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock