Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
July 30, 2013

Touch DJ – A Sencha Touch DJ App

Community and Events, Customer Experience, Front End Development

During the DJing with Sencha Touch talk at SenchaCon 2013 we finally unveiled and demonstrated Touch DJ.

Overview

Touch DJ is a full fledged DJ app. It takes inspiration from existing DJ hardware and desktop DJ software (such as Traktor and Serato Scratch Live).

The app implements the following features:

  • Two CDJ-style audio decks
    • Real Time Waveform Display
    • Play / Cue
    • Looping
    • Pitch Adjustment
    • Pitch Bending
  • 2 Channel Audio Mixer
    • 3 Band Equalizer (High, Mid, Low)
    • Channel Volume Control
    • Channel Volume Meters
    • Deck Transport Buttons
  • Track Browser
    • Display Track Metadata and Cover Art
    • Deck Load Buttons
  • External MIDI Support
    • Control App Functions from any MIDI Device / Software
    • Includes Sample TouchOSC Layout

Demo

You can check out Touch DJ in (almost) all its glory here: touchdj.moduscreate.com

Screenshots

Screenshot_4

iOS Simulator Screen shot Jul 3, 2013 1.09.13 AM

iOS Simulator Screen shot Jul 3, 2013 1.21.17 AM

Development

The app was written using Sencha Touch 2.2 on the front-end and Node.js to serve the static content, support the Track Browser as well as the MIDI communication via WebSockets.

The client was also supported by the following 3rd party libraries:

  • Wavesurfer.js
    • Real-time Waveform Display
  • Dragdealer.js
    • Touch enabled Slider
  • JavaScript ID3 Reader
    • Parse ID3 Metadata and CoverArt from MP3 files

This application would not have been possible without the HTML5 Web Audio API. The Web Audio API was used to handle the playing of the audio tracks, implementing a 3 Band Equalizer, Channel Volume Control & Meter, as well as the Crossfader.

This is what the Audio Routing Graph looks like for the Touch DJ app:

senchacon presentation.024

Source

Touch DJ is available in open source under the MIT license. Feel free to fork the repo:

Touch DJ on GitHub

Posted in Community and Events, Customer Experience, Front End Development
Share this

Stan Bershadskiy

Stan Bershadskiy specializes in all things JavaScript with vast knowledge in Sencha frameworks. Recently, he has directed his focus towards React Native and has co-authored The React Native Cookbook. Stan is located in New York City and can be found presenting at conferences around the country. During his time with Modus Create, Stan filled the role of Architect.
Follow

Related Posts

  • Sencha Touch 2.0
    Sencha Touch 2 Touch Events Re-firing

    While generally we try to avoid native browser alert() and confirm() we sometimes have no…

  • Sencha Touch 2.0
    Sencha Touch 2 Touch Events Re-firing

    While generally we try to avoid native browser alert() and confirm() we sometimes have no…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top