Skip to content

Commit 4fa4b74

Browse files
jcppmanjcppman
committed
init
0 parents  commit 4fa4b74

6 files changed

+376
-0
lines changed

‎README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
### USAGE
2+
In order to make the angular `templateUrl` work, you'll need a static file server.
3+
4+
- ``npm install -g http-server``
5+
- ``http-server -c-1``
6+

‎angular.min.js

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

‎angular.min.js.map

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

‎index.html

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
div.clear{
6+
clear: both;
7+
}
8+
div.grid{
9+
min-height: 50px;
10+
min-width: 50px;
11+
height: 50px;
12+
width: 50px;
13+
background-color: black;
14+
float: left;
15+
margin: 2px;
16+
}
17+
div.selected{
18+
background-color: red;
19+
}
20+
</style>
21+
</head>
22+
<body ng-app="dm">
23+
<div class="container" ng-controller="mainController">
24+
<div jc-drum-machine speed="speed"></div>
25+
</div>
26+
<script src="angular.min.js"></script>
27+
<script type="text/javascript">
28+
angular
29+
.module('dm', [])
30+
31+
.controller('mainController', function ($scope) {
32+
$scope.speed = 120;
33+
})
34+
35+
.directive('jcDrumMachine', ['$interval', function ($interval) {
36+
return {
37+
scope: {
38+
speed: '='
39+
},
40+
templateUrl: 'jcDrumMachine.html',
41+
controller: function ($scope) {
42+
$scope.arrange = function (tracks) {
43+
var audio = $scope.audioContext;
44+
var offset = $scope.arranged;
45+
var barLength = 240 / $scope.speed;
46+
var beatLength = barLength / 8;
47+
$scope.tracks.forEach(function (track) {
48+
if (!track.oscNode) {
49+
50+
track.gainNode = audio.createGain();
51+
track.gainNode.gain.value = 0;
52+
track.gainNode.connect(audio.destination);
53+
54+
track.oscNode = audio.createOscillator();
55+
track.oscNode.frequency.value = track.frequency;
56+
track.oscNode.type = track.wave;
57+
track.oscNode.connect(track.gainNode);
58+
track.oscNode.start(0);
59+
60+
}
61+
var beats = track.grids.map(function (g, i) {
62+
if(g) {
63+
return offset + i * beatLength;
64+
}
65+
return null;
66+
}).filter(function (it) {
67+
return it !== null;
68+
});
69+
70+
beats.forEach(function (startTime) {
71+
track.gainNode.gain.setValueAtTime(1, startTime);
72+
track.gainNode.gain.setValueAtTime(0, startTime + track.duration);
73+
});
74+
75+
});
76+
$scope.arranged += barLength;
77+
};
78+
},
79+
link: function (scope, element, attrs) {
80+
var ARRANGE_BEFORE = 0.5;
81+
scope.tracks = [
82+
{
83+
frequency: 440,
84+
duration: 0.1,
85+
wave: 'sine'
86+
},
87+
{
88+
frequency: 110,
89+
duration: 0.12,
90+
wave: 'square'
91+
},
92+
{
93+
frequency: 880,
94+
duration: 0.09,
95+
wave: 'triangle'
96+
},
97+
];
98+
scope.audioContext = new window.AudioContext();
99+
scope.arranged = scope.audioContext.currentTime;
100+
$interval(function () {
101+
var current = scope.audioContext.currentTime;
102+
if(scope.arranged - current < ARRANGE_BEFORE) {
103+
scope.arrange(scope.tracks);
104+
}
105+
}, 50);
106+
}
107+
};
108+
}])
109+
110+
.directive('jcTrack', [function () {
111+
return {
112+
scope: {
113+
track: "=jcTrack"
114+
},
115+
templateUrl: 'jcTrack.html',
116+
controller: function ($scope) {
117+
$scope.toggle = function (index) {
118+
var val = $scope.track.grids[index];
119+
$scope.track.grids[index] = !val;
120+
};
121+
},
122+
link: function (scope, element, attrs) {
123+
scope.track.grids = [
124+
false,
125+
false,
126+
false,
127+
false,
128+
false,
129+
false,
130+
false,
131+
false
132+
];
133+
scope.$watch('track.grids', function (grids) {
134+
console.log(grids);
135+
}, true);
136+
}
137+
};
138+
}]);
139+
140+
</script>
141+
</body>
142+
</html>

‎jcDrumMachine.html

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<input ng-model="speed" type="number"></input>
2+
<div class="track" jc-track="track" ng-repeat="track in tracks"></div>

‎jcTrack.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="grid" ng-class="{selected: grid}" ng-repeat="grid in track.grids track by $index" ng-click="toggle($index)">
2+
</div>
3+
<div class="clear"></div>

0 commit comments

Comments
 (0)