key-and-pad - 🎹 Fun experiment with the Web Audio API 🎶

  •        8

Key&Pad uses the Web Audio API to generate oscillators and effects. I needed some way for these nodes to be updated when the state in the Redux store changed, so I took inspiration from React and wrote a reconciler. It subscribes to the store, and whenever a change is published, it calculates the minimum change needed to update the Web Audio nodes.

http://keyandpad.com
https://github.com/joshwcomeau/key-and-pad

Dependencies:

babel-polyfill : ^6.9.1
classnames : ^2.2.5
keycode : ^2.1.2
lodash.curry : ^4.1.0
lodash.debounce : ^4.0.7
lodash.foreach : ^4.4.1
lodash.get : ^4.4.0
lodash.invert : ^4.1.1
lodash.invoke : ^4.5.0
lodash.invokemap : ^4.5.0
lodash.omit : ^4.3.0
lodash.pick : ^4.3.0
lodash.throttle : ^4.1.0
node-uuid : ^1.4.7
react : 15.3.0
react-addons-css-transition-group : 15.3.0
react-dom : 15.3.0
react-dropdown : ^1.0.4
react-flip-move : ^2.4.2
react-redux : ^4.4.5
react-router : ^2.7.0
react-router-redux : ^4.0.5
react-select : ^1.0.0-beta14
react-slider : ^0.7.0
react-syntax-highlighter : ^2.3.0
react-tap-event-plugin : ^1.0.0
redux : ^3.5.2
redux-saga : ^0.11.0
redux-thunk : ^2.1.0
redux-vcr : 0.3.1
reselect : ^2.5.3
soundbank-reverb : ^1.1.2
svg-inline-loader : ^0.6.1
tonal-freq : ^0.51.2
tunajs : ^0.4.5

Tags
Implementation
License
Platform

   




Related Projects

ZynAddSubFX - Music Software Synthesizer

  •    C++

ZynAddSubFX is a fully featured open source software synthesizer capable of making a countless number of instruments, from some common heard from expensive hardware to interesting sounds that you'll boost to an amazing universe of sounds.

redux-vcr - 📼 Record and replay user sessions

  •    Javascript

NOTE: This project is in early alpha. I've been using it in production in Key&Pad, but it has not been tested in larger/more complex applications. Check out the Medium post that details how and why this is being built.

panther - Discover artists through an infinite node graph

  •    Javascript

Panther is a full-stack React/Redux/Node web app that uses the Spotify API to make suggestions based on an initial user-specified artist. It uses a graph consisting of vertices and edges to represent the data. At the center, the user's currently-selected artist, along with the artist's avatar and some audio samples of the artist's top tracks. To the left is a vertex representing the previous artist, and to the right are 3 suggestions. By clicking on the vertices, users can move forwards and backwards through their suggestion tree, (hopefully) discovering a bunch of awesome new music.

multireducer - A utility to wrap many copies of a single Redux reducer into a single key-based reducer

  •    Javascript

multireducer is a utility to wrap many copies of a single Redux reducer into a single key-based reducer. There are times when writing a Redux application where you might find yourself needing multiple copies of the same reducer. For example, you might need more than one list of the same type of object to be displayed. Rather than make a big reducer to handle list A, B, and C, and have action creators either in the form addToB(item) or addToList('B', item), it would be easier to write one "list" reducer, which is easier to write, reason about, and test, with a simpler add(item) API.

LMMS - Cross-platform music production software

  •    C++

LMMS is a free cross-platform software which allows you to produce music with your computer. This covers creating melodies and beats, synthesizing and mixing sounds and arranging samples. You can have fun with your MIDI keyboard and much more – all in a user-friendly and modern interface. Furthermore LMMS comes with many ready-to-use instrument and effect plugins, presets and samples.


crossbuilder - Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack

  •    Javascript

Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are synced between background, injected page, app window, extension popup and badge.

AudioKitSynthOne - AudioKit Synth One: Open-Source iOS Synthesizer App

  •    Swift

We've open-sourced the code for this synthesizer so that everyone is able to make changes to the code, introduce new features, fix bugs, improve efficiency, and keep the synthesizer up-to-date with all new capabilities of the base operating system. If you're new to AudioKit, you can learn more: here. This code and app is made possible by all the contributors to AudioKit. Many of the features of Synth One are availble as modules in AudioKit, allowing you easy access to oscillators, filters, reverbs, effects, and other DSP processing: code here.

react-redux-boilerplate - A minimal React-Redux boilerplate with all the best practices

  •    Javascript

Please note that this boilerplate is production-ready and not meant for beginners! If you're just starting out with react or redux, please refer to https://github.com/petehunt/react-howto instead. If you want a solid, battle-tested base to build your next product upon and have some experience with react, this is the perfect start for you. So it involves a lot of additional learning curve to get started with react-boilerplate. That's why I forked it, stripped it down and made this leaner, beginner friendly boilerplate without all the additional complexity.

react-key-handler - React component to handle keyboard events :key:

  •    Javascript

React component to handle keyboard events (such as keyup, keydown & keypress). Unless you want absolute flexibility we recommend you to use a higher-order component in favour of the component.

io-808 - An attempt at a fully recreated web-based TR-808 drum machine.

  •    Javascript

An attempt at a fully recreated web-based TR-808 drum machine using React, Redux, and the Web Audio API. All of the sound generated by this drum machine are synthesized using the Web Audio API (look mom, no samples!). A side effect of this is while I got the sounds fairly close to the original hardware, there's still a lot of room for improvement (yes I'm looking at you Cymbal and Rimshot).

ReactJS_VideoGuides - ReactJS and Redux - Mastering Web Apps

  •    Javascript

"React JS and Redux - Mastering Web Apps": Official guide repo used to accompany video lessons.

react-redux-form - Create forms easily in React with Redux.

  •    Javascript

React Redux Form is a collection of reducer creators and action creators that make implementing even the most complex and custom forms with React and Redux simple and performant. That's all you need. Seriously. Read the Documentation for more information.

react-starter-kit - React Starter Kit — isomorphic web app boilerplate (Node

  •    Javascript

React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

react-redux - Official React bindings for Redux

  •    HTML

Official React bindings for Redux. Performant and flexible. React Redux requires React 0.14 or later.

react-redux-isomorphic-example - An isomorphic example built with react and redux , see readme for detailed instructions

  •    Javascript

This is an isomorphic/universal example built with react and Redux which utilizes the same codebase on server and browser to correctly handle multiple requests at the same time. This example was previously built with alt and now fully migrated to redux, you might as well compare the two and see the differences.

react-redux - Official React bindings for Redux

  •    Javascript

Official React bindings for Redux. Performant and flexible.React Redux requires React 0.14 or later.

redux-form - A Higher Order Component using react-redux to keep form state in a Redux store

  •    Javascript

redux-form works with React Redux to enable an html form in React to use Redux to store all of its state. You can play around with redux-form in these sandbox versions of the Examples.

react-native-track-player - A fully fledged audio module created for music apps

  •    Java

Check Platform Support for more information. After trying to team up modules like react-native-sound, react-native-music-controls and react-native-google-cast, I've noticed that their structure and the way should be tied together can cause a lot problems (mainly on Android). Those can heavily affect the app stability and user experience.

Rosegarden - Music software for Linux

  •    C++

Rosegarden is a well-rounded audio and MIDI sequencer, score editor, and general-purpose music composition and editing environment. Rosegarden is an easy-to-learn, attractive application that runs on Linux, ideal for composers, musicians, music students, and small studio or home recording environments.