💁This repository is a personal project, open to the community🚀. This Chrome extension allows to display the volume of the audio stream (I/O) of the Chrome page. The display is composed of vu metre in db (rms and peak) + LUFS (integrate, momentary and short term) 🔉.
<body>
<svg width="200" height="300" viewBox="0 0 200 300">
<rect x="20" y="20" width="160" height="260" fill="#ddd"/>
<rect id="vu-meter" x="30" y="30" width="140" height="240" fill="#00f"/>
</svg>
</body>
<script>
const vuMeter = document.getElementById("vu-meter");
let vuMeterHeight = 240;
function updateVUMeter(value) {
vuMeterHeight = 240 * (1 - value);
vuMeter.setAttribute("y", 30 + vuMeterHeight);
vuMeter.setAttribute("height", 240 - vuMeterHeight);
}
setInterval(function() {
// generate a random value between 0 and 1 to update the VU meter
const value = Math.random();
updateVUMeter(value);
}, 100);
</script>
In this example, we first create an SVG with a background rectangle and a rectangle to represent the VU meter. The VU meter is represented by the vu-meter rectangle, which we select using JavaScript and store in a variable.
We then define the updateVUMeter function, which updates the y and height attributes of the vu-meter rectangle based on a given value.
Finally, we use setInterval to generate a random value between 0 and 1 every 100 milliseconds, and pass that value to the updateVUMeter function to animate the VU meter.
Note that in a real-world scenario, the value used to update the VU meter would come from an audio analysis library or the Web Audio API, rather than a random value.
SVG animated
In this example, we first create an SVG with a background rectangle and a rectangle to represent the VU meter. The VU meter is represented by the vu-meter rectangle, which we select using JavaScript and store in a variable.
We then define the updateVUMeter function, which updates the y and height attributes of the vu-meter rectangle based on a given value.
Finally, we use setInterval to generate a random value between 0 and 1 every 100 milliseconds, and pass that value to the updateVUMeter function to animate the VU meter.
Note that in a real-world scenario, the value used to update the VU meter would come from an audio analysis library or the Web Audio API, rather than a random value.