A presentation at EmberConf 2020 by James C Davis
Ember as Song James C. Davis
An Idea • Brainstorming session • Melanie Sumner • Compose a song alongside building an Ember app
The Idea Grows • How to best compare building an app with composing a song • Map elements of song to concepts in Ember • An Ember app that IS a song
Programming and Songwriting • Both creative endeavors • Both are complex • Share many fundamental concepts • Patterns • Loops • Conditionals • Problem solving • Bugfixing
What’s in a song? • Sections • Intro • Verse • Chorus • Bridge
What are sections composed of? • Instruments • Parts • Notes • Measures • Phrases
Mapping to Ember • Sections -> Routes • Instruments -> Services • Parts -> Components • Notes -> Contextual Components
Section -> Route • A location in the song • Composed of instruments playing parts together • The musical equivalent of a “page”
Instrument -> Service • Instruments are global • Maintain state when moving through sections • Keep playing • Volume • Effects
Part -> Component • Made up of notes for one instrument • Often a pattern that repeats within a section • Often re-used across multiple sections
Note -> Contextual Component • Belongs to a part • Needs context • Which instrument • When to play relative to other notes
Other Globals • Tempo • Master Volume • Playing state (start, pause, stop) • Where we are in the timeline • Could be handled by a single or multiple services
Concept -> Implementation • Web Audio API - https://www.w3.org/TR/webaudio/ • • Extremely powerful, but very low level Tone.js - https://tonejs.github.io • Built on top of Web Audio API • Primitives for making music (not just sounds)
Hello World • Create one instrument: piano • Play a single note: middle C
Service: piano ember g service piano
Instrument Component
Part Component • Responsible for • Connecting notes to an instrument • Scheduling notes to play • Scheduling draws • Looping
Part Component
Note Component
Play it!
Scale • String of notes, one after another • Ascending (or descending) in pitch • Hitting all the white keys (for a C scale)
Scale
How does this work?
Visualization
Two Instruments
Multi-part
Loops
Drum Kit
Drum Kit
Drum Loop
Putting it all Together • Composed a song with Ember! • Routes and controllers for: intro, verse, chorus • Auto-advances among the sections • Routes handle timing and advancing • Controllers inject instruments (services) • Parent route for drums
Future Plans • Write more songs! • Turn this into an add-on • Continue to add features • Collaboratively write songs using GitHub!
Thank You! jamescdavis.github.io/ember-as-song twitter: @jamscdavis everywhere else: @jamescdavis
Songwriting and programming have much more in common than you might think and Ember is the perfect medium for demonstrating this. This talk will show you just how similar these two disciplines are by creating an Ember Octane app that is actually a piece of music! Components are our instruments and routes are our phrases! We’ll start with a simple riff and build upon it, piece by piece, the same way you’d develop any Ember app, only this is one you can hear! Come join me in building an app note-by-note and experience Ember in a brand new way!
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.