webaudio_nexusui_tonejs/05_sequenceur.html at master · emoc/webaudio_nexusui_tonejs · 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
<!DOCTYPE html>
<html>

<!--
    Séquenceur avec BPM

    NexusUI 2.1.6         http://nexus-js.github.io/ui/
    Tone.js 14.7.39       https://github.com/Tonejs/Tone.js
    Blueprint CSS 3.1.3   https://blueprintcss.dev/docs/grid

    10 février 2022 / pierre@lesporteslogiques.net / Debian 9.5 @ kirin

    https://github.com/emoc/webaudio_nexusui_tonejs
-->

<head>
    <meta charset="utf-8">
    <title>sequenceur</title>
    <script src="./Tone.js"></script>
    <script src="./NexusUI.js"></script>
</head>

<body style="margin: 50px;">

    <div id="seq"></div>
    <br>
    ON/OFF<br>
    <div id="tog"></div>
    BPM<br>
    <div id="bpm"></div>

    <script>

        // Interface graphique avec NexusUI.js *********************************
        var sequencer = new Nexus.Sequencer('#seq',{
            'size': [480,120],
            'mode': 'toggle',
            'rows': 4,
            'columns': 16,
            'paddingRow': 2,
            'paddingColumn': 2
        });

        sequencer.matrix.set.all([
            [1,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0],
            [0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0]
        ]);

        sequencer.on('step',function(v) {
            console.log(v); // Renvoie Array(4) [ 0, 0, 0, 0 ] En commençant par le bas
            if (v[3] === 1) piste4.triggerAttackRelease("C2", "16n");
            if (v[2] === 1) piste3.triggerAttackRelease("C6", "16n");
            if (v[1] === 1) piste2.triggerAttackRelease("C5", "16n");
            if (v[0] === 1) piste1.triggerAttackRelease("C2", "16n");
        });

        var toggle = new Nexus.Toggle('#tog',{
            'size': [40,20],
            'state': false
        });

        toggle.on('change',function(v) {
            Tone.start();
            //console.log("état du toggle modifié en " + v);
            if (v === true) {
                sequencer.start(15000 / next_bpm);  // Durée du pas, en ms
            } else {
                sequencer.stop();
            }
        });

        var next_bpm = 90;

        var bpm = new Nexus.Number('#bpm',{
            'size': [60,30],
            'value': next_bpm,
            'min': 60,
            'max': 200,
            'step': 1
        });

        bpm.on('change',function(v) {
            next_bpm = v;
            //console.log("BPM " + next_bpm + " millis " + (15000 / v) );
        });

        bpm.on('release',function() {
            //console.log('BPM relâché');
            if (toggle.state === true) {
                sequencer.stop();
                sequencer.start(15000 / next_bpm);
            }
        });

        // Synthèse sonore avec Tone.js ****************************************

        const piste4 = new Tone.MetalSynth({      // Bell
            harmonicity: 12,
            resonance: 800,
            modulationIndex: 20,
            envelope: {
                decay: 0.4,
            },
            volume: -15
        }).toDestination();

        const piste3 = new Tone.MetalSynth().toDestination();

        const piste2 = new Tone.MembraneSynth({     // Conga
            pitchDecay: 0.008,
            octaves: 2,
            envelope: {
                attack: 0.0006,
                decay: 0.5,
                sustain: 0
            }
        }).toDestination();

        const piste1 = new Tone.MembraneSynth().toDestination();

    </script>

</body>

</html>