|
3 | 3 | <h1>About</h1>
|
4 | 4 | <section>
|
5 | 5 | <h2>What is
|
6 |
| - <rave/>?</h2> |
| 6 | + <rave />?</h2> |
7 | 7 | <p>
|
8 |
| - <rave/> stands for |
| 8 | + <rave /> stands for |
9 | 9 | <strong>realtime audio visualizer experience</strong>.
|
10 | 10 | </p>
|
11 | 11 | <p>
|
|
15 | 15 | different aspects of it will change when a beat is detected in the song.
|
16 | 16 | </p>
|
17 | 17 | <p>
|
18 |
| - <rave/> isn't an animation that reacts to the beat, but rather a true visualization |
| 18 | + <rave /> isn't an animation that reacts to the beat, but rather a true visualization |
19 | 19 | of the audio data itself. The frequencies and waveforms of the incoming audio
|
20 | 20 | are used to generate
|
21 |
| - <rave/>'s rings, and the previous frames expand out from the center to visually |
| 21 | + <rave />'s rings, and the previous frames expand out from the center to visually |
22 | 22 | display the history of the audio.
|
23 | 23 | </p>
|
24 | 24 | <p>
|
25 | 25 | Because
|
26 |
| - <rave/> uses all of the audio data available to it for visualization, every song |
| 26 | + <rave /> uses all of the audio data available to it for visualization, every song |
27 | 27 | is visually unique. The same goes for the vocals; singers' voices are visually
|
28 | 28 | distinct as they contain different harmonics and waveform types. Unique sounds
|
29 | 29 | in songs look amazing, and in my opinion, the best songs to watch on
|
30 |
| - <rave/> are chill songs with not too much going on. |
| 30 | + <rave /> are chill songs with not too much going on. |
31 | 31 | </p>
|
32 | 32 | </section>
|
33 | 33 | <section>
|
34 | 34 | <h2>Technical Details</h2>
|
35 | 35 | <p>
|
36 |
| - <rave/> uses the |
| 36 | + <rave /> uses the |
37 | 37 | <strong>Web Audio API</strong> and
|
38 | 38 | <strong>Canvas API</strong> to collect and draw the audio data in realtime.
|
39 | 39 | </p>
|
|
43 | 43 | audio through, including
|
44 | 44 | <strong>AnalyserNode</strong> and
|
45 | 45 | <strong>BiquadFilterNode</strong>. These two nodes are the key pieces to making
|
46 |
| - <rave/> work. |
| 46 | + <rave /> work. |
47 | 47 | </p>
|
48 | 48 | <p>
|
49 | 49 | <strong>AnalyserNode</strong> is a wonderful little piece of
|
|
57 | 57 | <strong>BiquadFilterNode</strong> is a node that you can connect audio through to
|
58 | 58 | apply different biquad filters, such as highpass or lowpass. These filters
|
59 | 59 | allow
|
60 |
| - <rave/> to filter out different frequencies to make the visuals more aesthetic. |
| 60 | + <rave /> to filter out different frequencies to make the visuals more aesthetic. |
61 | 61 | For example, the entire audio source is run through a lowpass filter of 5 KHz,
|
62 | 62 | so that snares and "sss" noises don't brighten
|
63 |
| - <rave/> too much. |
| 63 | + <rave /> too much. |
64 | 64 | </p>
|
65 | 65 | </section>
|
66 | 66 | <section>
|
67 | 67 | <h2>Anatomy of
|
68 |
| - <rave/> |
| 68 | + <rave /> |
69 | 69 | </h2>
|
70 | 70 | <p class="img">
|
71 | 71 | <img src="@/assets/anatomy.jpg" alt="anatomy of raVe">
|
72 | 72 | </p>
|
73 | 73 | <p>
|
74 |
| - <rave/> generates 2 rings from the audio data, and both rings slowly morph between |
| 74 | + <rave /> generates 2 rings from the audio data, and both rings slowly morph between |
75 | 75 | a circle and hexagon.
|
76 | 76 | </p>
|
77 | 77 | <p>The inner ring is the audio waveform applied to the ring's shape, and mirrored
|
78 | 78 | along the y-axis.
|
79 | 79 | </p>
|
80 |
| - <p>The outer ring is made up of both frequency and time domain data, and is symmetry |
| 80 | + <p>The outer ring is made up of both frequency and time domain data, and is symmetric |
81 | 81 | over both the x and y axes. The frequency data goes from 0 Hz at the
|
82 | 82 | horizon to about 7 KHz at the top and bottom. The time domain data used
|
83 | 83 | for the outer ring is filtered to only show bass frequencies.
|
|
0 commit comments