Date post: | 22-Oct-2014 |
Category: |
Technology |
View: | 671 times |
Download: | 3 times |
Stan Bershadskiy, Senior Engineer, Modus Create
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