Skip to content

Commit a72b0aa

Browse files
left23left23
committed
sounds, mic input output as ellipse, not great as it relies on mic volume levels
1 parent 73d05d1 commit a72b0aa

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+48333
-0
lines changed

‎drums.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Drum Kit</title>
6+
<link rel="stylesheet" href="styles/drums.css">
7+
</head>
8+
<body>
9+
10+
<div class="container">
11+
<div id="canvas"></div>
12+
<div class="keys">
13+
<div data-key="9" class="key">
14+
<span class="pad"></span>
15+
<span class="sound">boom</span>
16+
</div>
17+
<div data-key="10" class="key">
18+
<span class="pad"></span>
19+
<span class="sound">kick</span>
20+
</div>
21+
<div data-key="11" class="key">
22+
<span class="pad"></span>
23+
<span class="sound">snare</span>
24+
</div>
25+
<div data-key="12" class="key">
26+
<span class="pad"></span>
27+
<span class="sound">tom</span>
28+
</div>
29+
<div data-key="25" class="key">
30+
<span class="pad"></span>
31+
<span class="sound">clap</span>
32+
</div>
33+
<div data-key="26" class="key">
34+
<span class="pad"></span>
35+
<span class="sound">hihat</span>
36+
</div>
37+
<div data-key="27" class="key">
38+
<span class="pad"></span>
39+
<span class="sound">openhat</span>
40+
</div>
41+
<div data-key="28" class="key">
42+
<span class="pad"></span>
43+
<span class="sound">ride</span>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<audio data-key="9" src="sounds/boom.wav"></audio>
49+
<audio data-key="10" src="sounds/kick.wav"></audio>
50+
<audio data-key="11" src="sounds/snare.wav"></audio>
51+
<audio data-key="12" src="sounds/tom.wav"></audio>
52+
<audio data-key="25" src="sounds/clap.wav"></audio>
53+
<audio data-key="26" src="sounds/hihat.wav"></audio>
54+
<audio data-key="27" src="sounds/openhat.wav"></audio>
55+
<audio data-key="28" src="sounds/ride.wav"></audio>
56+
<audio data-key="x" src="sounds/tink.wav"></audio>
57+
58+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
59+
<script src="js/lib/p5.sound.js"></script>
60+
<script src="js/lib/p5.midi.js"></script>
61+
<script src="js/drums.js"></script>
62+
63+
64+
65+
</body>
66+
</html>

‎js/drums.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
2+
var mySketch = function(myDrums) {
3+
4+
let padRange = [9,10,11,12,25,26,27,28];
5+
var padNumber = 9;
6+
var indPadItem;
7+
var padWidth = 100;
8+
var padHeight = 100;
9+
var padX = 50;
10+
var padY = 50;
11+
var amplitude;
12+
var boom;
13+
var volumeBoom;
14+
15+
16+
17+
myDrums.preload = function () {
18+
boom = myDrums.loadSound('sounds/Broke_For_Free_-_01_-_As_Colorful_As_Ever.mp3');
19+
}
20+
21+
p5.midi.onInput = function (event) {
22+
myDrums.clear();
23+
console.dir(event);
24+
myDrums.playSound();
25+
//Drums.volumeControl();
26+
}
27+
28+
myDrums.setup = function (event) {
29+
var myCanvas = myDrums.createCanvas(padWidth, padHeight, padX, padY);
30+
//myDrums.background(153);
31+
myDrums.line(0, 0, myDrums.width, myDrums.height);
32+
33+
const keys = Array.from(document.querySelectorAll('.key'));
34+
35+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
36+
37+
//console.log(keys);
38+
39+
function removeTransition(event) {
40+
if (event.propertyName !== 'transform') return;
41+
this.classList.remove('playing');
42+
}
43+
44+
console.log(boom);
45+
46+
myDrums.amplitude = new p5.Amplitude();
47+
boom.setVolume(0.5);
48+
//myDrums.amplitude.smooth(0.9);
49+
}
50+
51+
myDrums.draw = function () {
52+
myDrums.background(0);
53+
myDrums.fill(255);
54+
var level = myDrums.amplitude.getLevel();
55+
var size = myDrums.map(level, 0, 1, 0, 200);
56+
myDrums.ellipse(myDrums.width/2, myDrums.height/2, size, size);
57+
}
58+
59+
myDrums.playSound = function () {
60+
const padNumber = (event.data[1]);
61+
const audio = document.querySelector(`audio[data-key="${event.data[1]}"]`);
62+
const key = document.querySelector(`.key[data-key="${event.data[1]}"]`);
63+
const pads = Array.from(document.querySelectorAll('.key'));
64+
pads.forEach(pad => {
65+
});
66+
67+
//console.log(pads);
68+
69+
myDrums.textFont('sans-serif', 24);
70+
myDrums.textWidth(padWidth);
71+
myDrums.textAlign(myDrums.LEFT, myDrums.TOP);
72+
myDrums.fill(255, 255, 255);
73+
myDrums.strokeWeight(0);
74+
myDrums.text(padNumber, padX, padY);
75+
76+
// trigger sound on pad down only (127)
77+
if (event.data[2] == 127) {
78+
if (!audio) return;
79+
audio.currentTime = 0;
80+
audio.play();
81+
key.classList.add('playing');
82+
}
83+
84+
}
85+
86+
myDrums.volumeControl = function () {
87+
const volume = (event.data[2]);
88+
console.log('amplitude ' + amplitude);
89+
console.log('volume ' + volume);
90+
91+
// trigger sound on pad down only (127)
92+
if (event.data[2] <= 127) {
93+
94+
95+
}
96+
97+
}
98+
99+
}
100+
101+
var midiDrums = new p5(mySketch, 'canvas');
102+

‎js/lib/jquery-2.2.4.min.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)