tsprowl.github.io/audio-visualizer.html at master · tsprowl/tsprowl.github.io · 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
<!DOCTYPE html>
<html  >
<head>
  <!-- Site made with Mobirise Website Builder v5.6.11, https://mobirise.com -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="generator" content="Mobirise v5.6.11, mobirise.com">
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:image:src" content="">
  <meta property="og:image" content="">
  <meta name="twitter:title" content="Hellish Audio Visualizer">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  <link rel="shortcut icon" href="assets/images/logo2-1.png" type="image/x-icon">
  <meta name="description" content="Website Builder Description">


  <title>Hellish Audio Visualizer</title>
  <link rel="stylesheet" href="assets/web/assets/mobirise-icons/mobirise-icons.css">
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">
  <link rel="stylesheet" href="assets/tether/tether.min.css">
  <link rel="stylesheet" href="assets/dropdown/css/style.css">
  <link rel="stylesheet" href="assets/socicon/css/styles.css">
  <link rel="stylesheet" href="assets/theme/css/style.css">
  <link rel="preload" href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap"></noscript>
  <link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css"><link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">


</head>
<body>

  <section class="menu cid-tbFDK3AbCF" once="menu" id="menu1-78">


    <nav class="navbar navbar-expand beta-menu navbar-dropdown align-items-center navbar-fixed-top navbar-toggleable-sm">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>
        <div class="menu-logo">
            <div class="navbar-brand">


            </div>
        </div>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav nav-dropdown nav-right navbar-nav-top-padding" data-app-modern-menu="true"><li class="nav-item">
                    <a class="nav-link link text-white text-primary display-4" href="index.html">Work</a>
                </li><li class="nav-item"><a class="nav-link link text-white text-primary display-4" href="about-me.html">About Me</a></li>
                <li class="nav-item">
                    <a class="nav-link link text-white text-primary display-4" href="assets/files/Tyler-SprowlResume.pdf">Resume</a>
                </li></ul>

        </div>
    </nav>
</section>

<section class="mbr-section content4 cid-sWMUAiBZpT" id="content4-6j">


    <div class="container">
        <div class="media-container-row">
            <div class="title col-12 col-md-8">
                <h2 class="align-center pb-3 mbr-fonts-style display-5">Hellish Audio Visualizer</h2>


            </div>
        </div>
    </div>
</section>

<section class="mbr-section article content12 cid-sWMUAiTo2x" id="content12-6k">


    <div class="container">
        <div class="media-container-row">
            <div class="mbr-text counter-container col-12 col-md-8 mbr-fonts-style display-7">
                <div>This project is an audio visualizer created using HTML and JavaScript. It extracts the data of the song in question, in the case 'BFG Division' from DOOM 2016, analyzes it, separates it into bins based on its frequency, and these bins are then transformed into the bars we see. Users can also change the three levels of color displayed along the bars, as well as the colors displayed in those sections and in the background.
</div><div>
</div><div><br></div><div>The project can be viewed <a href="https://a4-tylersprowl.glitch.me/" class="text-secondary" target="_blank">here</a>&nbsp;(opens in a new tab)</div><div><br></div><div><br></div><div><br></div>
            </div>
        </div>
    </div>
</section>

<section class="cid-sWMUAjcK0K" id="social-buttons2-6l">


    <div class="container">
        <div class="media-container-row">
            <div class="col-md-8 align-center">

                <div class="social-list pl-0 mb-0">
                    <a href="https://twitter.com/SprylerOwl" target="_blank">
                        <span class="px-2 mbr-iconfont mbr-iconfont-social socicon-twitter socicon" style="color: rgb(255, 51, 102); fill: rgb(255, 51, 102);"></span>
                    </a>
                    <a href="mailto:tsprowl25@hotmail.com">
                        <span class="px-2 mbr-iconfont mbr-iconfont-social socicon-mail socicon" style="color: rgb(255, 51, 102); fill: rgb(255, 51, 102);"></span>
                    </a>
                    <a href="https://instagram.com/mobirise" target="_blank">

                    </a>
                    <a href="https://www.youtube.com/c/mobirise" target="_blank">

                    </a>
                    <a href="https://www.behance.net/Mobirise" target="_blank">

                    </a>
                </div>
            </div>
        </div>
    </div>
</section><section class="display-7" style="padding: 0;align-items: center;justify-content: center;flex-wrap: wrap;    align-content: center;display: flex;position: relative;height: 4rem;"><a href="https://mobiri.se/2608318" style="flex: 1 1;height: 4rem;position: absolute;width: 100%;z-index: 1;"><img alt="" style="height: 4rem;" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></a><p style="margin: 0;text-align: center;" class="display-7">Designed with Mobirise &#8204;</p><a style="z-index:1" href="https://mobirise.com/web-page-maker.html">Free Web Page Builder</a></section><script src="assets/popper/popper.min.js"></script>  <script src="assets/web/assets/jquery/jquery.min.js"></script>  <script src="assets/bootstrap/js/bootstrap.min.js"></script>  <script src="assets/tether/tether.min.js"></script>  <script src="assets/smoothscroll/smooth-scroll.js"></script>  <script src="assets/sociallikes/social-likes.js"></script>  <script src="assets/dropdown/js/nav-dropdown.js"></script>  <script src="assets/dropdown/js/navbar-dropdown.js"></script>  <script src="assets/touchswipe/jquery.touch-swipe.min.js"></script>  <script src="assets/theme/js/script.js"></script>


</body>
</html>