-
Notifications
You must be signed in to change notification settings - Fork 0
/
vumeter.html
83 lines (71 loc) · 1.82 KB
/
vumeter.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
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
vumeter = {
numberOfLeds: 8,
ledCollor: 'green',
greenMargin: 0.6,
yellowMargin: 0.8,
redMargin: 1.0,
collors:
{
1: 'green',
2: 'yellow',
3: 'red'
}
}
createLed = function(ledNo, collor){
led = '<div id="led'+ ledNo +
'" style="height: 20px; width: 150px; border-radius: 10px;' +
'background: ' + collor + '; margin-bottom: 3px;"></div>';
return led;
};
createVumeter = function(){
vumeterDiv = $('#vumeter');
vumeterDiv.empty();
console.log(vumeterDiv);
for(ledNo = vumeter.numberOfLeds; ledNo >0; ledNo--){
vumeterDiv.append(createLed(ledNo, vumeter.ledCollor));
}
};
audioValue = function(maxNum){
return Math.floor((Math.random() * maxNum) + 1);
}
getLedCollor = function(ledNo){
ledCollor = 'transparent';
vuScale = ledNo/vumeter.numberOfLeds;
if((vuScale)<=vumeter.greenMargin)
ledCollor = 'green';
else if(vuScale>vumeter.greenMargin && (vuScale)<=vumeter.yellowMargin)
ledCollor = 'yellow';
else
ledCollor = 'red';
return ledCollor;
}
writeToVumeter = function(vuValue){
for(ledNo = vumeter.numberOfLeds; ledNo >0; ledNo--){
$('#led' + ledNo).css('background', ledNo<vuValue ? getLedCollor(ledNo) : 'transparent');
}
}
$("button").click(function(){
vumeter.numberOfLeds = $("#noOfLeds").val() > 0 ? $("#noOfLeds").val() : 10;
createVumeter();
});
updateVumeter = function(){
writeToVumeter(audioValue(vumeter.numberOfLeds));
}
createVumeter();
setInterval(updateVumeter, 150);
});
</script>
</head>
<body>
<p>VU meter</p>
<p>Number of leds:<input type="number" id="noOfLeds"></input></p>
<p><button>Set</button></p>
<div id="vumeter">
</body>
</html>