senchacon: djing with sencha touch
DESCRIPTION
SenchaCon preso, DJing with Sencha Touch with Stan Bershadskiy, Senior Engineer, Modus Create.TRANSCRIPT
![Page 1: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/1.jpg)
Stan Bershadskiy, Senior Engineer, Modus Create@[email protected]
DJing with Sencha Touch
Monday, July 22, 13
![Page 2: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/2.jpg)
Agenda• Introduce the art form of DJing• Demonstrate Touch DJ• Dive into how the Touch DJ app was built
Monday, July 22, 13
![Page 3: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/3.jpg)
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
![Page 4: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/4.jpg)
What is DJing?
Monday, July 22, 13
![Page 5: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/5.jpg)
“A truly great DJ, just for a moment, can make a whole room fall in love.” - Bill Brewster & Frank Broughton
Monday, July 22, 13
![Page 6: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/6.jpg)
Monday, July 22, 13
![Page 7: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/7.jpg)
Monday, July 22, 13
![Page 8: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/8.jpg)
Touch DJ
Monday, July 22, 13
![Page 9: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/9.jpg)
Demo
Monday, July 22, 13
![Page 10: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/10.jpg)
Building the App
Monday, July 22, 13
![Page 11: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/11.jpg)
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
![Page 12: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/12.jpg)
Developing the UI• Components:
- Browser- Deck- Mixer
• Controllers:- Main- Deck- MIDI
Monday, July 22, 13
![Page 13: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/13.jpg)
Deck
Looping
Real Time Waveform
Pitch Bend
Pitch ControlCue PointTrack Info
Monday, July 22, 13
![Page 14: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/14.jpg)
Deck Component
Monday, July 22, 13
![Page 15: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/15.jpg)
Deck Component
Monday, July 22, 13
![Page 16: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/16.jpg)
Mixer
3 Band Equalizer
Volume Control
Volume Meters
Crossfader
Transport Buttons
Monday, July 22, 13
![Page 17: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/17.jpg)
Mixer Component
Monday, July 22, 13
![Page 18: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/18.jpg)
Mixer Fader Event Handlers
Monday, July 22, 13
![Page 19: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/19.jpg)
Track Browser
Deck Load Buttons
Track Metadata
Monday, July 22, 13
![Page 20: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/20.jpg)
Browser Component
Monday, July 22, 13
![Page 21: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/21.jpg)
Deck Controller
Monday, July 22, 13
![Page 22: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/22.jpg)
Deck Play/Pause Support
Monday, July 22, 13
![Page 23: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/23.jpg)
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
![Page 24: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/24.jpg)
Touch DJ Audio Graph
Monday, July 22, 13
![Page 25: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/25.jpg)
Touch DJ Audio Graph
Audio Bu!er
Monday, July 22, 13
![Page 26: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/26.jpg)
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
![Page 27: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/27.jpg)
Initializing Gains & EQs
Monday, July 22, 13
![Page 28: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/28.jpg)
Implementing Looping
Monday, July 22, 13
![Page 29: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/29.jpg)
Implementing Looping
Monday, July 22, 13
![Page 30: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/30.jpg)
Crossfading
Monday, July 22, 13
![Page 31: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/31.jpg)
Crossfading
Monday, July 22, 13
![Page 32: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/32.jpg)
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
![Page 33: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/33.jpg)
Why Node.js?• JavaScript on both ends• Asynchronous event-driven model• Extraordinary amount of well written third party modules
Monday, July 22, 13
![Page 34: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/34.jpg)
Load Track Metadata
Monday, July 22, 13
![Page 35: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/35.jpg)
Serve Track Metadata
Monday, July 22, 13
![Page 36: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/36.jpg)
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
![Page 37: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/37.jpg)
Server MIDI Support
Monday, July 22, 13
![Page 38: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/38.jpg)
Client MIDI Support
Monday, July 22, 13
![Page 39: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/39.jpg)
Client MIDI Support
Monday, July 22, 13
![Page 40: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/40.jpg)
Sencha Touch Resources
Monday, July 22, 13
![Page 41: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/41.jpg)
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
![Page 42: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/42.jpg)
Lessons Learned• Mobile Tablet Performance is poor• Implementing simple audio operations can be complicated
Monday, July 22, 13
![Page 43: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/43.jpg)
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
![Page 44: SenchaCon: DJing with Sencha Touch](https://reader034.vdocument.in/reader034/viewer/2022042521/54b76a024a795971038b4623/html5/thumbnails/44.jpg)
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