poses/audio.html at main · remotehack/poses · 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
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio</title>

    <style>
        body {
            --maroon: #1a090d;
            --violet: #4a314d;
            --lavendar: #6b6570;
            --green: #a8ba9a;
            --apple: #ace894;

            padding: 40px;
            font-family: sans-serif;
            color: var(--maroon);
            font-size: 160%;
            line-height: 1.6;
        }

        button {
            display: inline-block;
            border: 20px solid var(--violet);
            padding: 40px;
            font-size: 160%;
            color: deeppink;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <h2>Noiseinim</h2>

    <button id="start-button" data-playing="false">Start!</button>


    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
    <script src="https://unpkg.com/@tensorflow-models/posenet"></script>
    <script type="module">
        import { PoseStream, getDemoPose } from './poses.js';
        // all noises should be (x, y, context)
        import { playTri, playPulse, playNoise, playKick } from './noises.js';

        const actx = new AudioContext();
        let speed = 800;

        // play/pause functionality
        // video
        const stream = new PoseStream({ delay: speed });

        // play noises when poses happen
        stream.addEventListener('pose', (ev) => {
            console.log(ev.data);
            // score, keypoints[].part, position x y, score
            // (x, y, context, length, start)
            const nose = ev.data.keypoints[0].position;
            speed = nose.x;
            stream.delay = speed;
            let beatSpeed = speed / 100;
            playNoise(nose.x, nose.y, actx, 0.1, 0);

            const eye = ev.data.keypoints[2].position;
            playKick(eye.x, eye.y, actx, 0.5, beatSpeed / 2);

            const ear = ev.data.keypoints[4].position;

            const shoulder = ev.data.keypoints[6].position;

            const elbow = ev.data.keypoints[8].position;
            // playPulse(elbow.x, elbow.y, actx);

            const wrist = ev.data.keypoints[10].position;
            playTri(wrist.x, wrist.y, actx, beatSpeed / 2, 0);
        })

        const startButton = document.querySelector('#start-button');
        startButton.addEventListener('click', function () {

            // check if context is in suspended state (autoplay policy)
            if (actx.state === 'suspended') {
                actx.resume();
            }

            // play or pause track depending on state
            if (this.dataset.playing === 'false') {
                this.dataset.playing = 'true';
                this.innerText = 'Stop!';
                stream.start()
            } else if (this.dataset.playing === 'true') {
                stream.stop();
                this.dataset.playing = 'false';
                this.innerText = 'Start';
            }

        }, false);

    </script>
</body>

</html>