Skip to content

Commit ceec151

Browse files
authored
Merge pull request #11 from BrainAV/temp
Temp
2 parents 1d1a288 + ac71f4b commit ceec151

File tree

3 files changed

+37
-25
lines changed

3 files changed

+37
-25
lines changed

css/style.css

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,6 @@
277277
transform: rotate(270deg);
278278
width: 100px;
279279
}
280-
281280
.slider-container.vertical > label {
282281
margin-top: 15px;
283282
}
@@ -334,21 +333,28 @@
334333
width: 80%;
335334
flex: 1;
336335
background: #222;
337-
border-radius: 2px;
336+
border-radius: 5px;
338337
position: relative;
339338
overflow: hidden;
340339
border: 1px solid rgba(0,0,0,0.5);
341340
}
342341

343-
.vu-bar-stereo::after {
344-
content: '';
342+
.vu-bar {
345343
position: absolute;
346344
bottom: 0;
347345
left: 0;
348346
width: 100%;
349-
height: var(--vu-level, 0%);
350-
background: linear-gradient(to top, #00ff00 0%, #00ff00 60%, #ffff00 60%, #ffff00 85%, #ff0000 85%, #ff0000 100%);
351-
transition: height 0.05s linear;
347+
height: 0%;
348+
background-color: green;
349+
transition: height 0.05s ease-out, background-color 0.05s;
350+
}
351+
352+
.vu-bar.yellow {
353+
background-color: yellow;
354+
}
355+
356+
.vu-bar.red {
357+
background-color: red;
352358
}
353359

354360
.vu-label {

index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,11 @@ <h1>🎧 DJ Toolkit Pro</h1>
4747
</div>
4848
<div class="vu-meter-stereo" id="vuMeterA">
4949
<div class="vu-channel">
50-
<div class="vu-bar-stereo" id="vuBarAL"></div>
50+
<div class="vu-bar-stereo"><div id="vuBarAL" class="vu-bar"></div></div>
5151
<div class="vu-label">L</div>
5252
</div>
5353
<div class="vu-channel">
54-
<div class="vu-bar-stereo" id="vuBarAR"></div>
54+
<div class="vu-bar-stereo"><div id="vuBarAR" class="vu-bar"></div></div>
5555
<div class="vu-label">R</div>
5656
</div>
5757
</div>
@@ -103,11 +103,11 @@ <h1>🎧 DJ Toolkit Pro</h1>
103103

104104
<div class="vu-meter-stereo" id="vuMeterMaster">
105105
<div class="vu-channel">
106-
<div class="vu-bar-stereo" id="vuBarMasterL"></div>
106+
<div class="vu-bar-stereo"><div id="vuBarMasterL" class="vu-bar"></div></div>
107107
<div class="vu-label">L</div>
108108
</div>
109109
<div class="vu-channel">
110-
<div class="vu-bar-stereo" id="vuBarMasterR"></div>
110+
<div class="vu-bar-stereo"><div id="vuBarMasterR" class="vu-bar"></div></div>
111111
<div class="vu-label">R</div>
112112
</div>
113113
</div>
@@ -163,11 +163,11 @@ <h1>🎧 DJ Toolkit Pro</h1>
163163
</div>
164164
<div class="vu-meter-stereo" id="vuMeterB">
165165
<div class="vu-channel">
166-
<div class="vu-bar-stereo" id="vuBarBL"></div>
166+
<div class="vu-bar-stereo"><div id="vuBarBL" class="vu-bar"></div></div>
167167
<div class="vu-label">L</div>
168168
</div>
169169
<div class="vu-channel">
170-
<div class="vu-bar-stereo" id="vuBarBR"></div>
170+
<div class="vu-bar-stereo"><div id="vuBarBR" class="vu-bar"></div></div>
171171
<div class="vu-label">R</div>
172172
</div>
173173
</div>

js/main.js

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -367,12 +367,8 @@ class Deck {
367367
const barL = document.getElementById(`vuBar${this.id}L`);
368368
const barR = document.getElementById(`vuBar${this.id}R`);
369369

370-
if (barL) {
371-
barL.style.setProperty('--vu-level', `${Math.min(peakL * 1.5 * 100, 100)}%`);
372-
}
373-
if (barR) {
374-
barR.style.setProperty('--vu-level', `${Math.min(peakR * 1.5 * 100, 100)}%`);
375-
}
370+
updateBar(barL, peakL);
371+
updateBar(barR, peakR);
376372
}
377373

378374
play(startTimeOverride) {
@@ -587,6 +583,20 @@ class Deck {
587583
}
588584
});
589585

586+
function updateBar(bar, level) {
587+
if (!bar) return;
588+
const heightPercent = Math.min(level * 100, 100);
589+
bar.style.height = `${heightPercent}%`;
590+
591+
if (level > 0.9) {
592+
bar.className = 'vu-bar red';
593+
} else if (level > 0.4) {
594+
bar.className = 'vu-bar yellow';
595+
} else {
596+
bar.className = 'vu-bar';
597+
}
598+
}
599+
590600
function setupSpectrum() {
591601
spectrumAnalyser = audioContext.createAnalyser();
592602
spectrumAnalyser.fftSize = 256;
@@ -648,12 +658,8 @@ class Deck {
648658
const barL = document.getElementById('vuBarMasterL');
649659
const barR = document.getElementById('vuBarMasterR');
650660

651-
if (barL) {
652-
barL.style.setProperty('--vu-level', `${Math.min(peakL * 1.5 * 100, 100)}%`);
653-
}
654-
if (barR) {
655-
barR.style.setProperty('--vu-level', `${Math.min(peakR * 1.5 * 100, 100)}%`);
656-
}
661+
updateBar(barL, peakL);
662+
updateBar(barR, peakR);
657663
}
658664

659665
function startUpdateLoop() {

0 commit comments

Comments
 (0)