dMachine/index.html at master · jswed/dMachine · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
    <head>
        <style>
            div.clear{
                clear: both;
            }
            div.grid{
                min-height: 50px;
                min-width: 50px;
                height: 50px;
                width: 50px;
                background-color: black;
                float: left;
                margin: 2px;
            }
            div.selected{
                background-color: red;
            }
        </style>
    </head>
    <body ng-app="dm">
    <div class="container" ng-controller="mainController">
        <div jc-drum-machine speed="speed"></div>
    </div>
        <script src="angular.min.js"></script>
        <script type="text/javascript">
            angular
                .module('dm', [])

                .controller('mainController', function ($scope) {
                    $scope.speed = 120;
                })

                .directive('jcDrumMachine', ['$interval', function ($interval) {
                    return {
                        scope: {
                            speed: '='
                        },
                        templateUrl: 'jcDrumMachine.html',
                        controller: function ($scope) {
                            $scope.arrange = function (tracks) {
                                var audio = $scope.audioContext;
                                var offset = $scope.arranged;
                                var barLength = 240 / $scope.speed;
                                var beatLength = barLength / 8;
                                $scope.tracks.forEach(function (track) {
                                    if (!track.oscNode) {

                                        track.gainNode = audio.createGain();
                                        track.gainNode.gain.value = 0;
                                        track.gainNode.connect(audio.destination);

                                        track.oscNode = audio.createOscillator();
                                        track.oscNode.frequency.value = track.frequency;
                                        track.oscNode.type = track.wave;
                                        track.oscNode.connect(track.gainNode);
                                        track.oscNode.start(0);

                                    }
                                    var beats = track.grids.map(function (g, i) {
                                        if(g) {
                                            return offset + i * beatLength;
                                        }
                                        return null;
                                    }).filter(function (it) {
                                        return it !== null;
                                    });

                                    beats.forEach(function (startTime) {
                                        track.gainNode.gain.setValueAtTime(1, startTime);
                                        track.gainNode.gain.setValueAtTime(0, startTime + track.duration);
                                    });

                                });
                                $scope.arranged += barLength;
                            };
                        },
                        link: function (scope, element, attrs) {
                            var ARRANGE_BEFORE = 0.5;
                            scope.tracks = [
                                {
                                    frequency: 440,
                                    duration: 0.1,
                                    wave: 'sine'
                                },
                                {
                                    frequency: 110,
                                    duration: 0.12,
                                    wave: 'square'
                                },
                                {
                                    frequency: 880,
                                    duration: 0.09,
                                    wave: 'triangle'
                                },
                            ];
                            scope.audioContext = new window.AudioContext();
                            scope.arranged = scope.audioContext.currentTime;
                            $interval(function () {
                                var current = scope.audioContext.currentTime;
                                if(scope.arranged - current < ARRANGE_BEFORE) {
                                    scope.arrange(scope.tracks);
                                }
                            }, 50);
                        }
                    };
                }])

                .directive('jcTrack', [function () {
                    return {
                        scope: {
                            track: "=jcTrack"
                        },
                        templateUrl: 'jcTrack.html',
                        controller: function ($scope) {
                            $scope.toggle = function (index) {
                                var val = $scope.track.grids[index];
                                $scope.track.grids[index] = !val;
                            };
                        },
                        link: function (scope, element, attrs) {
                            scope.track.grids = [
                                false,
                                false,
                                false,
                                false,
                                false,
                                false,
                                false,
                                false
                            ];
                            scope.$watch('track.grids', function (grids) {
                                console.log(grids);
                            }, true);
                        }
                    };
                }]);

        </script>
    </body>
</html>