Ember as Song

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 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