Skip to content

Commit 1f7d6b8

Browse files
MonarchGitHubMonarchGitHub
committed
added audio visualizer
1 parent 941e2d1 commit 1f7d6b8

7 files changed

Lines changed: 183 additions & 80 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎92 - Audio Visualizer/assets/Showreel.mp3‎

4.09 MB
Binary file not shown.

‎92 - Audio Visualizer/assets/background.png‎

9.94 MB
Loading

‎92 - Audio Visualizer/audio.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
(function () {
2+
// The number of bars that should be displayed
3+
const Bar_number = 50;
4+
5+
// Get the audio element tag
6+
const audio = document.querySelector("audio");
7+
// audio.crossOrigin = "anonymous";
8+
const ctx = new AudioContext();
9+
10+
// Creating an audio source
11+
const audioSource = ctx.createMediaElementSource(audio);
12+
13+
const analayzer = ctx.createAnalyser();
14+
15+
audioSource.connect(analayzer);
16+
audioSource.connect(ctx.destination);
17+
18+
// Print the analyze frequencies
19+
const frequencyData = new Uint8Array(analayzer.frequencyBinCount);
20+
analayzer.getByteFrequencyData(frequencyData);
21+
console.log("frequencyData", frequencyData);
22+
23+
// Get the visualizer container
24+
const visualizerContainer = document.querySelector(".visualizer-container");
25+
26+
// Creating a set of pre-defined bars
27+
for (let i = 0; i < Bar_number; i++) {
28+
const bar = document.createElement("DIV");
29+
bar.setAttribute("id", "bar" + i);
30+
bar.setAttribute("class", "visualizer-container__bar");
31+
visualizerContainer.appendChild(bar);
32+
}
33+
34+
// This function has the task to adjust the bar heights according to the frequency data
35+
function renderFrame() {
36+
analayzer.getByteFrequencyData(frequencyData);
37+
38+
for (let i = 0; i < Bar_number; i++) {
39+
const index = (i + 10) * 2;
40+
41+
const fd = frequencyData[index];
42+
43+
const bar = document.querySelector("#bar" + i);
44+
if (!bar) {
45+
continue;
46+
}
47+
48+
const barHeight = Math.max(4, fd || 0);
49+
bar.style.height = barHeight + "px";
50+
}
51+
52+
window.requestAnimationFrame(renderFrame);
53+
}
54+
55+
renderFrame();
56+
57+
audio.volume = 0.6;
58+
audio.play();
59+
})();

‎92 - Audio Visualizer/index.html‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,24 @@
1111
</head>
1212

1313
<body>
14-
<div class="navbar" id="nav">
15-
<h2 class="navbar">Audio Visualizer</h2>
16-
</div>
14+
<div class="background"></div>
1715

18-
<div class="w3-content" style="max-width:1500px">
19-
<canvas></canvas>
16+
<div class="track-title"> Audio Visualizer
17+
<div class="player">
18+
<audio src="./assets/Showreel.mp3" id="playback" crossorigin="anonymous" autoplay="on"></audio>
19+
<div>
20+
<button class="button" onclick="document.getElementById('playback').play()">Play</button>
21+
<button class="button" onclick="document.getElementById('playback').pause()">Pause</button>
22+
<button class="button" onclick="document.getElementById('playback').volume += 0.1">Vol +</button>
23+
<button class="button" onclick="document.getElementById('playback').volume -= 0.1">Vol -</button>
24+
</div>
25+
</div>
2026

2127
</div>
2228

23-
<script src="sound_visual.js"></script>
29+
<div class="visualizer-container"></div>
30+
31+
<script src="audio.js"></script>
2432
</body>
2533

2634
</html>

‎92 - Audio Visualizer/sound_visual.js‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎92 - Audio Visualizer/styles.css‎

Lines changed: 107 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,119 @@
1-
* {
1+
/* *{
22
margin: 0;
33
padding: 0;
4-
}
4+
} */
55

66
body {
7-
min-height: 100vh;
8-
display: grid;
9-
grid-template-rows: 1fr;
10-
margin: 0;
11-
font-family: "Raleway", Arial, sans-serif;
7+
overflow: hidden;
128
}
139

14-
canvas {
15-
width: 100%;
16-
height: 100%;
17-
border: 2px solid red;
10+
/* Custom controls */
11+
.button {
12+
height: 8vw;
13+
width: 20vw;
14+
appearance: button;
15+
background-color: #000;
16+
background-image: none;
17+
border: 1px solid #000;
18+
border-radius: 4px;
19+
box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
20+
box-sizing: border-box;
21+
color: #fff;
22+
cursor: pointer;
23+
display: inline-block;
24+
font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
25+
font-size: 2vw;
26+
font-weight: 400;
27+
line-height: 20px;
28+
margin: 0 5px 10px 0;
29+
overflow: visible;
30+
padding: 12px 40px;
31+
text-align: center;
32+
text-transform: none;
33+
touch-action: manipulation;
34+
user-select: none;
35+
-webkit-user-select: none;
36+
vertical-align: middle;
37+
white-space: nowrap;
38+
}
39+
40+
.button:focus {
41+
text-decoration: none;
42+
}
43+
44+
.button:hover {
45+
text-decoration: none;
46+
}
47+
48+
.button:active {
49+
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
50+
outline: 0;
51+
}
52+
53+
.button:not([disabled]):active {
54+
box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
55+
transform: translate(2px, 2px);
56+
}
57+
58+
@media (min-width: 768px) {
59+
.button {
60+
padding: 12px 50px;
61+
}
62+
}
63+
.background {
64+
display: flex;
65+
height: 100vh;
66+
width: 100vw;
67+
background-image: url("./assets/background.png");
68+
background-position: center center;
69+
background-size: cover;
70+
filter: blur(4px);
71+
1872
}
1973

20-
.navbar {
74+
.track-title {
2175
display: flex;
22-
flex-wrap: wrap;
23-
flex-direction: row;
24-
margin: auto auto;
76+
flex-direction: column;
77+
position: absolute;
78+
width: 100%;
79+
top: 25vh;
80+
right: 0;
81+
left: 0;
82+
text-align: center;
83+
justify-content: center;
84+
color: white;
85+
font-family: Calibri;
86+
font-size: 10vh;
87+
88+
89+
}
90+
91+
.player{
92+
padding: 10px;
93+
}
94+
95+
.playback{
96+
2597
}
2698

27-
/* h2 {
99+
.visualizer-container {
100+
height: 30vh;
101+
width: 100%;
102+
position: absolute;
103+
bottom: 40px;
104+
right: 0;
105+
left: 0;
28106
text-align: center;
29-
} */
107+
overflow: hidden;
108+
}
109+
110+
.visualizer-container__bar {
111+
112+
display: inline-block;
113+
background-color: #FF9A8B;
114+
background-image: linear-gradient(12deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
115+
116+
margin: 0 2px;
117+
width: 25px;
118+
119+
}

0 commit comments

Comments
 (0)