SenchaCon preso, DJing with Sencha Touch with Stan Bershadskiy, Senior Engineer, Modus Create.

1. Stan Bershadskiy, Senior Engineer, Modus Create
@stan229
stan@moduscreate.com
DJing with Sencha
Touch
Monday, July 22, 13

2. Agenda
• Introduce the art form of DJing
• Demonstrate Touch DJ
• Dive into how the Touch DJ app was built
Monday, July 22, 13

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

4. What is DJing?
Monday, July 22, 13

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

6. Monday, July 22, 13

7. Monday, July 22, 13

8. Touch DJ
Monday, July 22, 13

9. Demo
Monday, July 22, 13

10. Building the App
Monday, July 22, 13

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

12. Developing the UI
• Components:
- Browser
- Deck
- Mixer
• Controllers:
- Main
- Deck
- MIDI
Monday, July 22, 13

13. Deck
Looping
Real Time Waveform
Pitch Bend
Pitch ControlCue PointTrack Info
Monday, July 22, 13

14. Deck Component
Monday, July 22, 13

15. Deck Component
Monday, July 22, 13

16. Mixer
3 Band
Equalizer
Volume
Control
Volume
Meters
Crossfader
Transport
Buttons
Monday, July 22, 13

17. Mixer Component
Monday, July 22, 13

18. Mixer Fader Event Handlers
Monday, July 22, 13

19. Track Browser
Deck Load
Buttons
Track
Metadata
Monday, July 22, 13

20. Browser Component
Monday, July 22, 13

21. Deck Controller
Monday, July 22, 13

22. Deck Play/Pause Support
Monday, July 22, 13

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

24. Touch DJ Audio Graph
Monday, July 22, 13

25. Touch DJ Audio Graph
Audio
Buffer
Monday, July 22, 13

26. Touch DJ Audio Graph
Audio
Buffer
Analyser
Script
Processor
Context
Destination
Filter
(High EQ)
Filter
(Mid EQ)
Filter
(Low EQ)
Gain
(XFader)
Gain
(Master)
Monday, July 22, 13

27. Initializing Gains & EQs
Monday, July 22, 13

28. Implementing Looping
Monday, July 22, 13

29. Implementing Looping
Monday, July 22, 13

30. Crossfading
Monday, July 22, 13

31. Crossfading
Monday, July 22, 13

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

33. Why Node.js?
• JavaScript on both ends
• Asynchronous event-driven model
• Extraordinary amount of well written third party modules
Monday, July 22, 13

34. Load Track Metadata
Monday, July 22, 13

35. Serve Track Metadata
Monday, July 22, 13

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

37. Server MIDI Support
Monday, July 22, 13

38. Client MIDI Support
Monday, July 22, 13

39. Client MIDI Support
Monday, July 22, 13

40. Sencha Touch Resources
Monday, July 22, 13

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

42. Lessons Learned
• Mobile Tablet Performance is poor
• Implementing simple audio operations can be complicated
Monday, July 22, 13

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

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