SenchaCon: DJing with Sencha Touch
Upcoming SlideShare
Loading in...5
×
 

SenchaCon: DJing with Sencha Touch

on

  • 3,741 views

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

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

Statistics

Views

Total Views
3,741
Views on SlideShare
522
Embed Views
3,219

Actions

Likes
0
Downloads
4
Comments
0

10 Embeds 3,219

http://moduscreate.com 3147
http://cloud.feedly.com 49
https://twitter.com 9
http://translate.googleusercontent.com 3
http://www.feedspot.com 3
http://webcache.googleusercontent.com 3
http://reader.aol.com 2
http://www.goread.io 1
http://0.0.0.0 1
http://feedly.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

SenchaCon: DJing with Sencha Touch SenchaCon: DJing with Sencha Touch Presentation Transcript

  • Stan Bershadskiy, Senior Engineer, Modus Create @stan229 stan@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 Buffer Monday, July 22, 13
  • 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
  • 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