Audio-visualization/index.html at master · Anisha7/Audio-visualization · 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
<style>
    html,
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        background-color: cornsilk;
        font-family: monospace;
    }

    h1 {
        font-size: 60px;
    }

    button,
    select {
        padding: 10px 20px;
        margin: 10px;
        font-size: 20px;
        background-color: transparent;
        border-radius: 20px;
    }

    select {
        margin-bottom: 40px;
    }

    .inline {
        display: flex;
        margin: 0 10px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    canvas {
        margin: 20px;
    }
</style>

<body>
    <h1>Frequency visualizer</h1>
    <select id="select-song">
        <option value="music/mid.ogg">Instrumental</option>
        <option value="music/finalsong.mp3">Final song by MO</option>
        <option value="music/dieantwood.mp3">Alien by Die Antwood </option>
        <option value="music/BeyonceHalo.mp3">Halo by Beyonce </option>
        <option value="music/SiaCheapThrills.mp3">Cheap Thrills by Sia </option>
        <option value="music/DrakeOneDance.mp3">One Dance by Drake </option>
    </select>
    <div class="inline">
        <canvas id="canvas" width="300" height="300"></canvas>
        <canvas id="canvas2" width="300" height="300"></canvas>
        <canvas id="canvas3" width="300" height="300"></canvas>
        <canvas id="canvas4" width="300" height="300"></canvas>
    </div>
    <div>
        <button id="button-play">Play!</button>
        <button id="button-stop">Stop!</button>
    </div>

    <script src="scripts/helpers.js"></script>
    <script src="scripts/visualize.js"></script>
    <script src="scripts/audio.js"></script>
    <script>


    </script>
</body>