├── .gitignore
├── .babelrc
├── watch.sh
├── audio
├── concert-crowd.mp3
└── concert-crowd.ogg
├── README.md
├── src
├── audio-distortion-node.js
├── get-set-controls.js
├── tracker-table.js
├── tracker-table-svg.js
├── simple-tracker.js
├── app.js
└── default-track.js
├── package.json
├── main.css
└── index.html
/.gitignore:
--------------------------------------------------------------------------------
1 | nbproject
2 | dist
3 | node_modules
4 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "presets": ["es2015"]
4 |
5 | }
6 |
--------------------------------------------------------------------------------
/watch.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | watchify src/app.js -t --debug -o 'bundle.js'
3 |
--------------------------------------------------------------------------------
/audio/concert-crowd.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/diversen/drum-machine-javascript/HEAD/audio/concert-crowd.mp3
--------------------------------------------------------------------------------
/audio/concert-crowd.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/diversen/drum-machine-javascript/HEAD/audio/concert-crowd.ogg
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # drum-machine-javascript
2 |
3 | A simple drum-machine written in javascript
4 |
5 | It uses these great drum-samples:
6 |
7 | https://github.com/oramics/sampled/
8 |
9 | You can try it out here: https://diversen.github.io/drum-machine-javascript/
10 |
11 | ## Install
12 |
13 | git clone https://github.com/diversen/drum-machine-javascript
14 |
15 | Just clone this repo, and start a server inside it - og place it on a server.
16 |
17 | ## Dev install
18 |
19 | Install deps:
20 |
21 | npm install
22 |
23 | ## Watch and build:
24 |
25 | You will need watchify `sudo npm install -g watchify`
26 |
27 | watchify src/main.js -t --debug -o 'bundle.js'
28 |
29 | Or (short form of above)
30 |
31 | npm run watch
32 |
33 | ## Licence
34 |
35 | MIT © [Dennis Iversen](https://github.com/diversen)
36 |
37 |
--------------------------------------------------------------------------------
/src/audio-distortion-node.js:
--------------------------------------------------------------------------------
1 | function audioDistortionNode(ctx) {
2 |
3 | this.ctx = ctx;
4 | this.distortion;
5 | this.amount = 400;
6 |
7 | this.getDistortionNode = function (amount) {
8 |
9 | if (amount) {
10 | this.amount = amount;
11 | }
12 |
13 | this.distortion = this.ctx.createWaveShaper();
14 | this.distortion.oversample = '4x';
15 | this.distortion.curve = this.makeDistortionCurve(this.amount);
16 | return this.distortion;
17 | }
18 |
19 | this.makeDistortionCurve = function (amount) {
20 | var k = typeof amount === 'number' ? amount : 50,
21 | n_samples = 44100,
22 | curve = new Float32Array(n_samples),
23 | deg = Math.PI / 180,
24 | i = 0,
25 | x;
26 | for (; i < n_samples; ++i) {
27 | x = i * 2 / n_samples - 1;
28 | curve[i] = (3 + k) * x * 20 * deg / (Math.PI + k * Math.abs(x));
29 | }
30 | return curve;
31 |
32 | };
33 | }
34 |
35 | module.exports = audioDistortionNode;
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "drum-machine",
3 | "version": "3.0.2",
4 | "description": "A simple drum machine / sequencer written in javascript",
5 | "main": "src/main.js",
6 | "scripts": {
7 | "test": "test.js",
8 | "watch": "watchify src/main.js -t --debug -o 'bundle.js'"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/diversen/drum-machine-javascript.git"
13 | },
14 | "keywords": [
15 | "drum-machine",
16 | "sequencer"
17 | ],
18 | "author": "dennis iversen",
19 | "license": "MIT",
20 | "bugs": {
21 | "url": "https://github.com/diversen/drum-machine-javascript/issues"
22 | },
23 | "homepage": "https://github.com/diversen/drum-machine-javascript#readme",
24 | "dependencies": {
25 | "adsr-gain-node": "^3.1.0",
26 | "file-saver": "^1.3.8",
27 | "get-html-rows-cells": "^2.0.0",
28 | "get-set-form-values": "^4.0.0",
29 | "has-class": "^1.0.6",
30 | "load-sample-set": "^4.0.2",
31 | "select-element": "^2.1.0",
32 | "set-value": "^2.0.1",
33 | "tiny-sample-loader": "^2.0.0",
34 | "toggle-class": "0.0.0",
35 | "waaclock": "^0.5.3"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/get-set-controls.js:
--------------------------------------------------------------------------------
1 | const getSetFormValues = require('get-set-form-values');
2 |
3 | function getSetControls() {
4 |
5 | this.getTrackerControls = function() {
6 |
7 | let formValues = new getSetFormValues();
8 | let form = document.getElementById("trackerControls");
9 | let values = formValues.get(form);
10 | let ret = {};
11 | for (let key in values) {
12 |
13 | if (key === 'delayEnabled') {
14 | ret[key] = 'delay';
15 | continue;
16 | }
17 | if (key === 'gainEnabled') {
18 | ret[key] = 'gain';
19 | continue;
20 | }
21 |
22 | if (key === 'sampleSet') {
23 | ret[key] = values[key];
24 | continue;
25 | }
26 | ret[key] = parseFloat(values[key]);
27 | }
28 | return ret;
29 | }
30 |
31 | this.setTrackerControls = function (values) {
32 | if (!values) {
33 | values = this.getTrackerControls();
34 | }
35 | this.options = values;
36 | };
37 |
38 | }
39 |
40 | module.exports = getSetControls;
41 |
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
1 | @import url(https://fonts.googleapis.com/css?family=Merriweather:400,700);
2 |
3 | .merriweather {
4 | font-family: 'Merriweather';
5 | }
6 |
7 | /*
8 | #controls {
9 | font-family: 'Merriweather';
10 | font-size: 10px;
11 | }*/
12 | a {
13 | color: hotpink;
14 | }
15 |
16 | #tracker-container {
17 | background-color: ghostwhite;
18 | width: 100%;
19 | padding: 20px;
20 | background-color: #F4A360;
21 | display: flex;
22 | flex-wrap:wrap;
23 | }
24 |
25 | #tracker-controls {
26 | margin-left: 20px;
27 | padding:20px;
28 | background-color: tomato;
29 | }
30 |
31 |
32 | #tracker-parent {
33 | padding:20px;
34 | flex-basis: auto;
35 | background-color: gainsboro;
36 | /*overflow-x: visible;*/
37 | }
38 |
39 |
40 | .tracker-cell, .tracker-first-cell, .tracker-cell-header {
41 | height: 20px;
42 | min-width: 20px;
43 | border: black;
44 | border-color: black;
45 | background: #fff;
46 | border-style: solid;
47 | border-width: 1px;
48 | font-size: 75%;
49 | padding:2px;
50 | /*background-color: pink;*/
51 | }
52 |
53 | .tracker-enabled {
54 | background: orange;
55 | }
56 |
57 | .tracker-current {
58 | background: blueviolet;
59 | }
60 |
61 | #app-message {
62 | position: fixed;
63 | top: 10px;
64 | left: 10px;
65 | background-color: peru;
66 | margin: 10px;
67 | padding: 10px;
68 | display: none;
69 | }
70 |
--------------------------------------------------------------------------------
/src/tracker-table.js:
--------------------------------------------------------------------------------
1 | function trackerTable() {
2 |
3 | this.str = '';
4 | this.getTable = function () {
5 | return '';
6 | };
7 |
8 | this.setHeader = function (numRows, data) {
9 | this.str += ``;
12 |
13 | };
14 |
15 | this.setRows = function (numRows, numCols, data) {
16 |
17 | this.setHeader(numCols, data);
18 | for (let rowID = 0; rowID < numRows; rowID++) {
19 | this.str += ``;
20 | this.str += this.getCells(rowID, numCols, data);
21 | this.str += `
`;
22 | }
23 | };
24 |
25 | this.getFirstCell = function (rowID, data) {
26 | var str = '';
27 |
28 | str += ``;
29 | if (data.title) {
30 | str += data.title[rowID];
31 | }
32 |
33 | str += ` | `;
34 | return str;
35 | };
36 |
37 | this.getCells = function (rowID, numRows, data) {
38 | var str = '';
39 |
40 | str += this.getFirstCell(rowID, data);
41 |
42 | let cssClass = 'tracker-cell'
43 |
44 | if (rowID == 'header') {
45 | cssClass = 'tracker-cell-header'
46 | }
47 |
48 | for (let c = 0; c < numRows; c++) {
49 | str += ``;
50 | if (data.header) {
51 | str += c + 1;
52 | }
53 | str += ` | `;
54 | }
55 | return str;
56 | };
57 | }
58 |
59 | module.exports = trackerTable;
60 |
--------------------------------------------------------------------------------
/src/tracker-table-svg.js:
--------------------------------------------------------------------------------
1 | function trackerTableSvg() {
2 |
3 | this.str = '';
4 | this.options = {
5 | cellFirst: 120,
6 | cellWidth: 16,
7 | cellSpace: 4
8 | }
9 |
10 | this.options.cellWithSpace = this.options.cellSpace + this.options.cellWidth
11 | this.options.cellFirstWithSpace = this.options.cellFirst + this.options.cellSpace
12 |
13 | /**
14 | * @param int number of cells
15 | * @param int number of rows
16 | * @param object data
17 | */
18 | this.setRows = function (numRows, numRows, data) {
19 |
20 | this.numRows = numRows;
21 | this.numRows = numRows;
22 |
23 | this.setHeader(numRows, data);
24 | for (let rowID = 0; rowID < numRows; rowID++) {
25 | this.str += this.getCells(rowID, numRows, data);
26 | }
27 | };
28 |
29 | this.setHeader = function (numRows, data) {
30 | this.str += this.getCells('header', numRows, { header: true });
31 | };
32 |
33 | this.getTable = function () {
34 |
35 |
36 | let boxX = (this.options.cellFirst + this.options.cellSpace) +
37 | (this.numRows * this.options.cellWithSpace)
38 | let boxY = (this.numRows + 1) * (this.options.cellWithSpace)
39 |
40 | let html = `
41 | `
51 | return html
52 | };
53 |
54 | this.getFirstCell = function (rowID, data) {
55 |
56 | let str = '';
57 | str += `
58 | `;
65 |
66 | if (data.title) {
67 | let text = data.title[rowID];
68 | str += `
69 | ${text}
73 | `;
74 | }
75 |
76 | this.currentX = this.options.cellFirstWithSpace
77 | return str;
78 | };
79 |
80 | this.currentX = 0
81 | this.getCurrentX = function (x) {
82 | return x + this.currentX
83 | }
84 |
85 | this.y = 0;
86 | this.getCells = function (rowID, numRows, data) {
87 | var str = '';
88 | var x = 0;
89 |
90 | // Get first cell. E.g. instrument
91 | str += this.getFirstCell(rowID, data);
92 | for (let c = 0; c < numRows; c++) {
93 |
94 | str += `
95 |
103 | `;
104 |
105 | if (data.header) {
106 | // column header. A number
107 | let text = c + 1;
108 | str += `
109 | ${text}
116 | `;
117 | }
118 |
119 | x += this.options.cellWithSpace
120 | }
121 |
122 | this.y += this.options.cellWithSpace
123 | return str;
124 | };
125 | }
126 |
127 | module.exports = trackerTableSvg;
128 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | javascript drum machine
6 |
8 |
9 |
11 |
12 |
13 |
14 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
71 |
72 |
79 |
80 |