amilajack/drum-machine

A drum machine. Made with Vue and the WebAudio API.

TR-101

A Drum machine. Made with Vue and the WebAudio API.

Live Demo

See the live demo here

Local Setup

npm install
# Start development version of app locally
npm start
# Build optimized production version of the app
npm run build

Planned Additions

• Mobile support (touch interface for knobs)
• Make tempo changes and pauses/plays restart from the same place (probably with some accumulator parameter)
• Accent / velocity editing
• Audio to keep running in the background (even when requstAnimationFrame isn't being called)
• Different waveforms
• Master volume
• Filters (HP/LP)
• Keyboard shortcuts
• Shareable presets
• Effects (distortion, delay, reverb)
• Sampler capabilities

Support

If you love this project, please either:

• Make a one time donation on PayPal
• Support me on Patreon

Related

• awesome-audio-resources: A list of resources and projects to help learn about audio on the web

drum-machine's Issues

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: package.json
Error type: The renovate configuration file contains some invalid settings
Message: Configuration option 'packageRules[2].node' should be a json object, Configuration option 'packageRules[2].npm' should be a json object, Invalid configuration option: author, Invalid configuration option: babel, Invalid configuration option: browserslist, Invalid configuration option: eslintConfig, Invalid configuration option: name, Invalid configuration option: packageRules[0].color, Invalid configuration option: packageRules[0].lodash, Invalid configuration option: packageRules[0].vue, Invalid configuration option: packageRules[1].autoprefixer, Invalid configuration option: packageRules[1].babel-core, Invalid configuration option: packageRules[1].babel-loader, Invalid configuration option: packageRules[1].babel-plugin-transform-runtime, Invalid configuration option: packageRules[1].babel-preset-env, Invalid configuration option: packageRules[1].babel-preset-stage-2, Invalid configuration option: packageRules[1].babel-register, Invalid configuration option: packageRules[1].chalk, Invalid configuration option: packageRules[1].connect-history-api-fallback, Invalid configuration option: packageRules[1].copy-webpack-plugin, Invalid configuration option: packageRules[1].css-loader, Invalid configuration option: packageRules[1].cssnano, Invalid configuration option: packageRules[1].eslint, Invalid configuration option: packageRules[1].eslint-config-airbnb-base, Invalid configuration option: packageRules[1].eslint-config-bliss, Invalid configuration option: packageRules[1].eslint-plugin-vue, Invalid configuration option: packageRules[1].eventsource-polyfill, Invalid configuration option: packageRules[1].express, Invalid configuration option: packageRules[1].extract-text-webpack-plugin, Invalid configuration option: packageRules[1].file-loader, Invalid configuration option: packageRules[1].friendly-errors-webpack-plugin, Invalid configuration option: packageRules[1].gh-pages, Invalid configuration option: packageRules[1].html-webpack-plugin, Invalid configuration option: packageRules[1].http-proxy-middleware, Invalid configuration option: packageRules[1].opn, Invalid configuration option: packageRules[1].optimize-css-assets-webpack-plugin, Invalid configuration option: packageRules[1].ora, Invalid configuration option: packageRules[1].parcel-bundler, Invalid configuration option: packageRules[1].rimraf, Invalid configuration option: packageRules[1].semver, Invalid configuration option: packageRules[1].shelljs, Invalid configuration option: packageRules[1].url-loader, Invalid configuration option: packageRules[1].vue-loader, Invalid configuration option: packageRules[1].vue-style-loader, Invalid configuration option: packageRules[1].vue-template-compiler, Invalid configuration option: packageRules[1].webpack, Invalid configuration option: packageRules[1].webpack-bundle-analyzer, Invalid configuration option: packageRules[1].webpack-dev-middleware, Invalid configuration option: packageRules[1].webpack-hot-middleware, Invalid configuration option: packageRules[1].webpack-merge, Invalid configuration option: private, Invalid configuration option: renovate, Invalid configuration option: scripts, Invalid configuration option: version, The "node" object can only be configured at the top level of a config but was found inside "packageRules[2]", The "npm" object can only be configured at the top level of a config but was found inside "packageRules[2]"

Need to hear what sounds each of the buttons make

you can't hear what sounds you are pressing down until you press "Play" so it would be nice to have some playback feature that allows you to hear the sounds that each button makes so the user won't have to press "play" every time.

update infra

CI not building

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Update dependency webpack-merge to v5

Rate Limited

These updates are currently rate limited. Click on a checkbox below to force their creation now.

• Update dependency express to ^4.17.3
• Update dependency shelljs to ^0.8.5
• Update npm to >= 6.14.16
• Update dependency copy-webpack-plugin to v10
• Update dependency eslint to v8
• Update dependency eslint-config-airbnb-base to v15
• Update dependency eslint-config-bliss to v6
• Update dependency eslint-plugin-vue to v8
• Update dependency vue to v3
• Update dependency vue-loader to v17
• Update npm to v8

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency autoprefixer to ^9.8.8
• Update dependency babel-loader to ^8.2.4
• Update Node.js to v16
• Update dependency chalk to v5
• Update dependency color to v4
• Update dependency css-loader to v6
• Update dependency cssnano to v5
• Update dependency html-webpack-plugin to v5
• Update dependency http-proxy-middleware to v2
• Update dependency optimize-css-assets-webpack-plugin to v6
• Update dependency ora to v6
• Update dependency semver to v7
• Update dependency url-loader to v4
• Update dependency webpack to v5
• Update dependency webpack-bundle-analyzer to v4
• Update dependency webpack-dev-middleware to v5
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Update dependency eslint-config-airbnb-base to ^14.2.1
• Update dependency autoprefixer to v10
• Update dependency file-loader to v6
• Update dependency gh-pages to v3

---

• Check this box to trigger a request for Renovate to run again on this repository

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

add screenshot to readme