-
Notifications
You must be signed in to change notification settings - Fork 0
/
website.html
114 lines (113 loc) · 7.9 KB
/
website.html
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
<!DOCTYPE HTML>
<!--
Read Only by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>See Major</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<link href='https://fonts.googleapis.com/css?family=Raleway:200,400,800|Londrina+Outline' rel='stylesheet' type='text/css'>
</head>
<body
<!-- Header -->
<section id="header">
<header>
<h1 id="logo">See Major</h1>
<p>Northwestern University EECS 352 <br> Professor Bryan Pardo</p>
</header>
<nav id="nav">
<ul>
<li><a href="#intro" class="active">Introduction</a></li>
<li><a href="#motivation">Motivation</a></li>
<li><a href="#implementation">Implementation</a></li>
<li><a href="#results">Results</a></li>
<li><a href="#nextsteps">Next Steps</a></li>
</ul>
</nav>
<footer>
<ul class="icons">
<li><a href="./app" class="icon fa-play"><span class="label">Project</span></a></li>
<li><a target="blank" href="https://github.com/lilyszhang/see-major" class="icon fa-github"><span class="label">Github</span></a></li>
<li><a href="mailto:[email protected],[email protected]" class="icon fa-envelope"><span class="label">Email</span></a></li>
</ul>
</footer>
</section>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<!-- One -->
<section id="intro">
<div class="container">
<header class="major">
<h2>SEE MAJOR</h2>
<h3>An audio visualizer by Allison Sun and Lily Zhang</h3>
</header>
<p>Our project, <a class="link" href="index.html">See Major</a>, is an audio spectrum visualizer that allows viewers to see visualized frequency data as a song is streamed in real-time. The visualization dynamically changes as the frequency, amplitude, and beat of the audio change. While the concept of an audio visualizer is not new, we want to incorporate features where the user can select to hear and visualize the spectrum of not only the original audio, but also the beat of the song. </p>
</div>
</section>
<!-- Two -->
<section id="motivation">
<div class="container">
<h3>Motivation</h3>
<p>Audio visualizations are listening platforms that double as fun, interactive displays. We wanted to create a dynamic visualization that allows users to visualize songs by rendering the frequency data into cool animations while they are listening to the song in real-time. We also wanted users to be able to see how the frequency differs between the original audio and the beat (background) of a song. This led us to create See Major, an audio visualizer that we believe transforms a simple listening experience into an exciting listening and visual experience. </p>
</div>
</section>
<!-- Three -->
<section id="implementation">
<div class="container">
<h3>Implementation</h3>
<p>We started with an audio file and extracted the background audio using NUSSL’s REPET. To get audio data from the songs, we used Web Audio API’s AnalyserNode, which gets streaming FFT frequency data (Figure 1) in an array of values between 0 to 255 that represent the relative volume (magnitude in decibels) at each frequency band. The array changes as different parts of the audio is played since the data corresponds to the sound captured for that exact moment in time.</p>
<figure>
<img src="images/console.png" style="width: 700px; display: block; margin: auto;">
<figcaption class="caption" style="color:#000; font-size:12px; text-align: center;">Figure 1: Frequency data returned by Web Audio API's AnalyserNode</figcaption>
</figure>
<p>To render the data into visualizations, we used D3 to create charts such as the frequency bar graph (Figure 2). The numbers obtained from Web Audio API’s AnalyserNode is used for the dimensions of the graphs. Each element is an SVG element styled using CSS. As the song is played, the frequency data is constantly streaming and the audio spectrum on the interface dynamically updates to create real-time visualizations.</p>
<figure>
<img src="images/bar.png" style="width: 700px; display: block; margin: auto;">
<figcaption class="caption" style="color:#000; font-size:12px; text-align: center;">Figure 2: Frequency data rendered into bar charts</figcaption>
</figure>
<p>On the web platform, users can choose a song from a preselected playlist to listen and visualize. The song is streamed and the audio spectrum visualizations change according to the part of the music streamed. Users can also alternate between the original audio and the background as the song is playing in real-time to see how the frequency levels differ in different song components.</p>
<figure>
<img src="images/interface.png" style="width: 700px; display: block; margin: auto;">
<figcaption class="caption" style="color:#000; font-size:12px; text-align: center;">Figure 3: Interface with song and visualization selector</figcaption>
</figure>
</div>
</section>
<!-- Four -->
<section id="results">
<div class="container">
<h3>Results</h3>
<p>We used preset songs to test the functionality of our system, checking that the visualizations accurately portrayed the frequency, amplitude, and beat of the songs that we selected. In order to judge the quality of our system, we sought user feedback. Our main goal was to create a system that users would use for their own entertainment, meaning they should be able to understand what is happening and also find the interface easy to use and aesthetically pleasing. In order to measure this, we asked users to perform a set of tasks to measure how intuitive the interface is and to rate the interface based on its visual appeal. The success of the tasks and responses to the visual appeal were both overwhelmingly positive in the group of seven users that we tested.</p>
</div>
</section>
<!-- Six -->
<section id="nextsteps">
<div class="container">
<h3>Next Steps</h3>
<p>There are numerous options for expanding on our project in the future. One feature that we would like to implement is the ability to upload files and run REPET on the files in real-time so that users can listen and switch between background and original segments of a song of their choice without any break. Additionally, the current source separation is quite unclear and the background files still contain some lyrics, depending on the song. If possible, we would like to improve the quality of the audio files returned by the REPET code. Another idea we could look into is using beat-tracking to change the visualizations. Finally, something that would make the system more entertaining for users would be the option of having more types of visualizations (i.e. a waveform visualization), which would take more exploration into the D3 framework.</p>
</div>
</section>
</div>
<!-- Footer -->
<section id="footer">
<div class="container">
<ul class="copyright">
<li>© See Major. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</section>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollzer.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>