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

  •        6

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

Tags
Implementation
License
Platform

   




Related Projects

ZynAddSubFX - Music Software Synthesizer


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


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


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


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.

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


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-redux-form - Create forms easily in React with Redux.


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.

LMMS - Cross-platform music production software


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.

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


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.

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


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-starter-kit - React Starter Kit — isomorphic web app boilerplate (Node


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-isomorphic-example - An isomorphic example built with react and redux , see readme for detailed instructions


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


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


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-form


React Form is a lightweight framework and utility for building powerful forms in React applications.

Rosegarden - Music software for Linux


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.

reactotron - A desktop app for inspecting your React JS and React Native projects


Make sure your reactotron-* dependencies match the version of the Reactotron app. For example reactotron-react-native@2 will only work with the 2.x version of the app. reactotron-react-native@2 requires react-native >= 0.54. If you need, an older version, checkout the 1.x branch.

ROMPlayer - AudioKit Sample Player (ROM Player) - EXS24, Sound Font, Wave Player


Welcome to the official AudioKit example of a sample-based music instrument written in Swift. It can be modified to play EXS24, Wave, or Sound Fonts. This code is lightweight and demonstrates how you can make a beautiful sounding, pro-level instrument with small amount of code. If you're new to AudioKit, you can learn more and view getting started links: here.

phoenix-trello - Trello tribute done in Elixir, Phoenix Framework, React and Redux.


Trello tribute done with Elixir, Phoenix Framework, Webpack, React and Redux. You need to have Elixir v1.3 and PostgreSQL installed.