Stan Bershadskiy, Senior Engineer, Modus Create

@stan229stan@moduscreate.com

DJing with Sencha Touch

Monday, July 22, 13

Agenda• Introduce the art form of DJing• Demonstrate Touch DJ• Dive into how the Touch DJ app was built

Monday, July 22, 13

About Me• Senior Engineer at Modus

Create• Started with Sencha GWT,

now focused on Touch• Author of Sencha Touch

DZone Refcard• DJ in my spare time

Monday, July 22, 13

What is DJing?

Monday, July 22, 13

“A truly great DJ, just for a moment, can make a whole room fall in love.” - Bill Brewster & Frank Broughton

Monday, July 22, 13

Monday, July 22, 13

Monday, July 22, 13

Touch DJ

Monday, July 22, 13

Demo

Monday, July 22, 13

Building the App

Monday, July 22, 13

Front-End• Sencha Touch 2.2• 3rd Party Libraries:

- WaveSurfer.js- Audio Visualization- http://katspaugh.github.io/wavesurfer.js/

- Dragdealer JS- Drag-based slider component- http://code.ovidiu.ch/dragdealer/

- JavaScript ID3 Reader- https://github.com/aadsm/JavaScript-ID3-Reader

• Flat UI design

Monday, July 22, 13

Developing the UI• Components:

- Browser- Deck- Mixer

• Controllers:- Main- Deck- MIDI

Monday, July 22, 13

Deck

Looping

Real Time Waveform

Pitch Bend

Pitch ControlCue PointTrack Info

Monday, July 22, 13

Deck Component

Monday, July 22, 13

Deck Component

Monday, July 22, 13

Mixer

3 Band Equalizer

Volume Control

Volume Meters

Crossfader

Transport Buttons

Monday, July 22, 13

Mixer Component

Monday, July 22, 13

Mixer Fader Event Handlers

Monday, July 22, 13

Track Browser

Deck Load Buttons

Track Metadata

Monday, July 22, 13

Browser Component

Monday, July 22, 13

Deck Controller

Monday, July 22, 13

Deck Play/Pause Support

Monday, July 22, 13

Web Audio API• JavaScript API for processing

and synthesizing audio• Built on Audio Routing Graph

paradigm• Allows for real time audio

analysis and manipulation• Used in Games, Music

players, Musical Instrument emulators and more...

Monday, July 22, 13

Touch DJ Audio Graph

Monday, July 22, 13

Touch DJ Audio Graph

Audio Bu!er

Monday, July 22, 13

Touch DJ Audio Graph

Audio Bu!er

Analyser Script Processor

Context Destination

Filter (High EQ)

Filter (Mid EQ)

Filter (Low EQ)

Gain (XFader)

Gain (Master)

Monday, July 22, 13

Initializing Gains & EQs

Monday, July 22, 13

Implementing Looping

Monday, July 22, 13

Implementing Looping

Monday, July 22, 13

Crossfading

Monday, July 22, 13

Crossfading

Monday, July 22, 13

Node.js Backend• Serve static Touch app • Support Track Browser

- Track Listing JSON- Serve Cover Art for each track

• Serve audio files• Modules:

- Express- Socket.io- Async, Music-metadata, and node-midi

Monday, July 22, 13

Why Node.js?• JavaScript on both ends• Asynchronous event-driven model• Extraordinary amount of well written third party modules

Monday, July 22, 13

Load Track Metadata

Monday, July 22, 13

Serve Track Metadata

Monday, July 22, 13

External MIDI Support• Allow external devices to control

Touch DJ- iPhone / iPad via TouchOSC or any

other device/software that sends MIDI• MIDI messages communicated to the

client via WebSockets• Client uses a MIDI Mapping JSON file

- MIDI Control ID App Event Name

Monday, July 22, 13

Server MIDI Support

Monday, July 22, 13

Client MIDI Support

Monday, July 22, 13

Client MIDI Support

Monday, July 22, 13

Sencha Touch Resources

Monday, July 22, 13

Web Audio API Resources• W3 Specification

- https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

• HTML5 Rocks- http://www.html5rocks.com/en/tutorials/webaudio/intro/

Monday, July 22, 13

Lessons Learned• Mobile Tablet Performance is poor• Implementing simple audio operations can be complicated

Monday, July 22, 13

Conclusion• Web Audio API is extremely

flexible, powerful and performant

• Sencha Touch plays well with external libraries via Custom Components

• Node.js has a rich module ecosystem that allows quick ramp up

Monday, July 22, 13

Take the Survey!• Session Survey

- Available on the SenchaCon mobile app

- http://app.senchacon.com

• Be Social!- @SenchaCon- #SenchaCon- Add your speaker handle here

or delete this bullet

Monday, July 22, 13