Live coding a musical instrument with the web-midi + web-audio api's

Imagine a world where you can plug a digital controller into a computer, open a a browser, and start controlling a sophisticated algorithmically generated music environment with the touch of a button. With the web-midi api landing in chrome 43 this type of experience will soon be possible to everyone running a modern computer. This session will explore building a midi-controllable generative synthesizer LIVE using the web-midi api for controlling user input, and the web-audio api for synthesis.

The talk will explore the history of the Midi protocol, and follow the path to where it finally is being supported in browsers. It will introduce some basic music theory, what is a key, what is an octave, as well as some basic composition theory. It will introduce digital signal processing, the concept of a unit generator, how the web-audio api works, and how you can use it to build a basic synthesizer. This will all be presented in the form of a live coding session, building a working instrument from first principals (and a couple modules).

At the end of the session we will have a working instrument that can be used to make some music that we can all groove to!

 
 

Outline/structure of the Session

Introduction to music technology

  • what is midi?
    • history
    • comparison to a piano
    • standard
  • what is a midi controller?
    • introduction to monome / other external controller
    • connecting our controller to the web-midi api
  • introduction to basic music theory
    • what is an octave
    • wait pythagoras invented all this!
    • what is a key
    • automagically making everything sound good!
  • introduction to the web-audio api
    • what is a unit generator
    • converting midi notes to frequency
    • Audio rate vs control rate
    • polyphony
  • wiring it all up
    • using the controller to drive the audio engine
    • making a basic arpeggiator
    • sending messages back to the device for visual feedback

Learning Outcome

After this session people should have a good grasp on exactly what midi is. They should have a basic understanding of the core principals of music theory, specifically the western musical cannon. They should also have an idea of how audio-graphs are built, and the logic used under the hood for a large number of synthesizers. Finally they should be able to tie together these concepts to build interactive audio instruments in the browser that can be controlled with off the shelf midi keyboards.

Target Audience

Anyone who love music + code (a.k.a EVERYONE)

schedule Submitted 1 year ago

Comments Subscribe to Comments

comment Comment on this Proposal

  • Liked Anmol Agrawal
    keyboard_arrow_down

    Mapping Party with Mapbox

    Anmol Agrawal
    Anmol Agrawal
    schedule 1 year ago
    Sold Out!
    90 mins
    Workshop
    Beginner

    Maps has become a crucial part of our applications today, be it weather forecasting, epidemiology, mining, urban planning or studying killing patterns of criminals. But how did we start working with maps? How did we combine data analysis with Maps? What are it's potential? We will have a glimpse at past, present and future of maps.

    With the up-rise of open-source technologies, Google Maps is not the only option now. Mapbox is a developer focused mapping platform. It powers thousands of applications and websites, with customizable and scalable maps, analysis and data. It enables any developer to become a cartographer instantaneously. Consider Mapbox as wikipedia for maps. We will look into into how maps and Mapbox works, what is Open Street Map (an open-source database to store geolocation data), Mapbox APIs, Mapbox Studio (a tool to create your personalized styled maps) and some supporting libraries like TurfJS (Spatial Analysis) and Directions API.

  • John K. Paul
    John K. Paul
    schedule 1 year ago
    Sold Out!
    90 mins
    Workshop
    Intermediate

    The list of solidified ES6 has kept growing and we, on the client side, just get greener with envy. Many of these new features won’t be supported in a broad base of browsers for years to come, but there is hope for us nonetheless. While we don’t have the ease of flipping a command line flag, like node, to bask in the warm sunlight of ES6 sugar, we can build a system that gives us similar results.

    Using a combination of shims and transpilers, we can enjoy these new language features while still maintaining support for all of the browsers you’d need. I'll first explain some of the great new additions to the JavaScript programming language and example use cases with code that take advantage of ES6's elegance for client side development. I will go through the details of setting up a development environment with source maps for debugging the code that you wrote, rather than what is generated by a transpiler.

    After listening to this talk, I hope your jealousy will be soothed, and I know that your curiosity will be satisfied.

  • Liked Anmol Agrawal
    keyboard_arrow_down

    Fun with JavaScript and Arduino

    Anmol Agrawal
    Anmol Agrawal
    schedule 1 year ago
    Sold Out!
    45 mins
    Talk
    Beginner

    “Internet of things” is the concept of basically connecting any device with an on and off switch to the Internet.

    IoT has been possible through devices like Arduino, Raspberry Pi and many more. Initially, working with them started with C/C++. Now, you can do the same with different languages like Python, Ruby, JavaScript, Go and more languages are coming to this landscape. NodeJS, frameworks and npm has built an environment like no other. Just with the the fundamental knowledge of JavaScript and reading through API docs, one can easily get started with IoT. That's what I will be showing.

    I would like to share my approach, resources etc I learned from and show things that are possible.

  • Liked Shyam Purkayastha
    keyboard_arrow_down

    Famo.us : A new kind of Web UI for the future

    Shyam Purkayastha
    Shyam Purkayastha
    schedule 1 year ago
    Sold Out!
    45 mins
    Demonstration
    Intermediate

    Famo.us is a pure javascript UI framework which deviates from traditional web development approach around declerative coding & brings in the ability to marry different visual elements under the HTML5  and Open Web umbrella ( such as CSS3, Canvas, SVG & WebGL ) to create absolutely stunning user interfaces. In this talk we are going to have a look at some of the capabilities of famo.us by means of a few demonstrations. We will demonstrate a few web applications built with Famo.us, right from the basic apps, to the more engaging ones , all the way to the more advanced applications which can arguably thwart any traditional multimedia content consumption platform in favour of the web.  

  • Liked Alexis Abril
    keyboard_arrow_down

    MV* - Practical Applications with CanJS

    Alexis Abril
    Alexis Abril
    schedule 2 years ago
    Sold Out!
    90 mins
    Tutorial
    Intermediate

    Structure of client side applications is a debated topic. While there are many varied approaches, I will take you through concepts we use at Bitovi when building complex applications. Separation of concerns, thin server architecture, and how we structure our data layer are a few of the many topics we will touch in this tutorial session.

  • Kris Borchers
    Kris Borchers
    schedule 2 years ago
    Sold Out!
    60 mins
    Keynote
    Beginner

    The jQuery Foundation is always working toward making the web accessible to everyone through our efforts in open source projects, standards and the web community. This talk will highlight many of the efforts we are currently focussed on and we'll also dive into some of the projects we've been working on with the community to give you an idea of current outcomes of those efforts and demonstrate some of the uses of those projects. Though jQuery and its related projects are still important to the web, this talk will focus more on the other efforts the jQuery Foundation is involved in that many may not know about.